Big Question : How to connect the Css styles to the specific paragraph?

Dear Guys,
I want to know that when we have lots of paragraph so how to implement the Css style in specific Style? Do we need to use any id or something to relate the style in specific paragraph?

If we have 20 Paragraph and all of them have different fonts,colors,font sizes,back ground colors. So that means we have to write 20 different Styles for all 20 Paragraphs? and how we relate the specific style to specific Paragraph? Supose we used h2 heading four times then in Css style we will write h2 so all the h2 heading will be same style but actualy all four heading are differnt size,font,color so how we can apply same style, very confused.
Please explain me.I think every Paragraph should have Id or something to reconize?

 

You will probably want to use CSS classes or IDs (if every paragraph is different). It's very simple to apply a style to a paragraph or h2 heading. Adding a class or id is as follows:

<p class="testclass">Text Here</p>
<h2 class="testclass">Heading Text</h2>

<p id="testid">Text Here</p>
<h2 id="testid">Heading Text</h2>

Code (markup):

If everything has a base style, you can do:

<p class="basestyle" id="testid1">Text Here</p>
<p class="basestyle" id="testid2">Text Here</p>
<p class="basestyle" id="testid3">Text Here</p>
<p class="basestyle" id="testid4">Text Here</p>

Code (markup):

I suggested reading up on the basics of CSS at W3 Schools (link).

 

Oh thanks now I got it. So in the Css style also we have to use same ID right? Basestyle means Same style in all the Paragraphs?

 

You can also use div.

<div class=yourclass>CONTENT</div>

 

Why would they use a div if they want a paragraph of text?

OP: I don't really understand your latest question so I though I would explain for you. If each paragraph's style is to be unique then you should use an ID, like so.

<p id="top">
Some text here. This text will be red.
</p>
<p id="bottom">
Some text here. This text will be blue. 
</p>

HTML:

Then to style these <p>'s you would use the following css.

#top {
color: red;
}
#bottom {
color: blue;
}

Code (markup):

If you have another tag inside a <p> like a span for example then you can style that <span> like so,

<p id="top">
Some text here. This text will be red. <span> The text inside the span will be green </span>.
</p>
<p id="bottom">
Some text here. This text will be blue.
</p>

HTML:

Then you could style that like so,

#top {
color: red;
}

#top span {
color: green;
}

#bottom {
color: blue;
}

Code (markup):

Basically the #top span line says "All <span> tags within the paragraph with id top should have a text colour of green.

If you want to have say four paragraphs and have the same style on two of the paragraphs you would use a class. Like so,

<p class="intro">
This could be some text about an intro. This text will be green.
</p>
<p class="other">
This could be some more text. This text is red.
</p>
<p class="intro">
As the class is "intro" this text will be green.
</p>
<p class="other">
Similarly, this text will be red as the class is "other".
</p>
<p>
Note: You don't have to apply a class. This text will be blue. All other <p> that don't have a class will have blue text.
</p>

HTML:

.intro {
color: green;
}
.other {
color: red;
}
p {
color: blue;
}

Code (markup):

I hope that explained it.

 

Dear Nicangeli,
You have cleared my all confusion with nice examples, this is very very important for me.I want to thanks you so much for your important time, you are a exellent teacher. You understand my problem exactly. I have note down your examples in my note in case I forget it but I understand the concept clearly how styles relate to paragraphs.

Can we use a number as id or any word we want to use?

 

Thanks.

That's actually a very good question, and I must admit I am not sure of the answer. I would say to you that the convention is to use a word (or words) that describe what it actually is.

I'll get back to you with what characters you are allowed to use for ID's and Classes.

Also to note, what I showed you can be applied to any HTML (xHTML) tag not just <p> paragraphs. Yet another example,

<h1>  The heading </h1>
<ol id="favFruits">
<li>
Orange
</li>
<li class="apples">
Apples
</li>
</ol>
<span class="apples">
This text will be blue. Even though the text "Apples" in the previous element that had a class of apples is red.
</span>

HTML:

You could style that like so,

h1 {
color: black; /* This is the default, so is not required. I placed it here to show you */
}

#favFruits {
font-family: Verdana, Tahoma, sans-serif;
}

#favFruits .apples {
color: red;
}

.apples {
color: blue;
}

Code (markup):

The <h1> element should be self explanatory.

Note how I applied a ID to an "Ordered List" (<ol> that tag.) You can then style everything that is inside that element. In this case everything will be in Verdana. Note how it's not just color that can be changed with CSS.

#favFruits .apples {

Code (markup):

This line basically says, "All elements with the class of apples within any element with an id of favFruits should have the following properties.

Then note how the .apples class is reused, (you can reuse classes but not ID's. This then makes the text that is inside the span blue.

Understand?

 

I am confuse again. Why some people use Div. and some # and some Id and name? What is major difference between ID and Class and when actually we should use Div.? I read some where that we should not use numbers in Ids.
I am confused between ID and Classes and Div. and Name please explain me easierway, I would appreciate it. thanks.

If you could explain me how the Page Layout with cols strucker works? How we can creat multipule cols?

 

<div> Is a place holder in order for you to add style to a large section of content. It is used for things that you don't want to put into a <p> tag, or if you have multiple tags that should be styled the same. <div> is also nice for laying out your page with css.

Class shoudl be used when you have multiple elements with the same style (there are lots of people in a class).
ID shoudl be used when only one element on a page will use that style (while there are many in a class there can only be one student ID).

I was a bit confused by <div> when I first started as well. I don't know how well I explained it but I hope it helps. http://www.w3schools.com/tags/tag_DIV.asp check out that page for more information on the div tag.

 

You can also apply styles to all paragraphs within a certain div using the css. For example, if you have some paragraphs within the "mydiv". Then the css would be

.mydiv p {
font-size: 110%;
}

As an example if you wanted to make all the paragraphs a bit bigger.

 

On w3school they have basic only they dont explain in detail. I think I will understand slowly looking at source code of other sites. Div is like Column? We can apply all the Css style to all the content of that div ? Your mean is like that?