Id & Class In CSS
Lessons Covered


In CSS you will often times find need for the use of id and class.

Id and Class is often times associated with the grouping of elements in CSS. Elements are grouped in order to apply styles to them. The id is used when you wish to apply a style to only one specific element per web page. The class on the other hand is used to apply a style to a set of elements. The class can be used numerous times on a single web page.



To give you a better understanding of the concepts just defined, the examples below paint a picture.


CSS Id

When styling elements each id should be unique. You will need to specify a name preceded by the number sign ( # ). After you have done this, specify the style ( properties and their values ).

On the web page, you will now have to pinpoint where the style should be applied by using the id selector.

Let's demonstrate this more clearly. You can create the files shown below and try it for yourself. Name your html and css file anything you desire so long as you can remember it and reference it.

webpage.html

 
<h3> New2HTML.com </h3>

<h5> Read it. Learn it. Apply it. </h5>


In the code snippet above a webpage was created with a main heading and a sub heading. Now, in the style sheet below we specify the unique name preceded by the number sign ( in this case #format ) and then the style.

style.css

 
#format 
{
color: blue;
font-style: italic;
}


Now the final step would be to go back to the web page and use the id selector to identify where the specified style ( i.e. #format ) should be applied.

webpage.html ( Updated )

 
<h3> New2HTML.com </h3>

<h5 id="format"> Read it. Learn it. Apply it. </h5>

arrow  Click to see final result

Note that nothing was done for the main heading so it remains unaltered. Do you think that if id="format" was to be applied it would work ?

Perhaps it would, but this is an ERROR and if you were to validate your site (use tools to check it for errors) it would point it out to you.

Always remember an id should be unique and each id should only be used once per web page.


CSS Class

A class is used when we wish to apply a style to more than one element. Unlike the id, a single class can be used multiple times on a web page.

In your style sheet you have to specify a name preceded by a dot ( . ). You then apply any properties and values just as you did for the id.

Finally, identify all the areas you wish to apply the style by using the class selector.

Let's follow up with a example. Observe below:

webpage.html

 
<h3> What is New2HTML ? </h3>

<h5> A HTML, CSS and web building website. </h5>


Here we have altered the text a bit but have the same main heading and sub heading. Let's now change the color of both headings to purple. To do this we can create a class with the color property and the value purple. Like this:

style.css

 
.headings 
{
color: purple;
}


Now lets update the webpage to include the class which was just defined ( .headings ). This class will be applied to the main heading and sub heading.

webpage.html ( Updated )

 
<h3 class="headings"> What is New2HTML ? </h3>

<h5 class="headings"> A HTML, CSS and web building website. </h5>

arrow  Click to see final result


In the updated version you can see the class was applied twice; once to the main heading and once to the sub heading. Remember a class can be used multiple times on a web page.

That's it for class and id, two of the very important features that we will use throughout the tutorials. Look out for them and continue to practice on your own to grasp this technique. Click the next lesson link below to proceed.




    Previous Lesson Previous Lesson - Stylesheet Types                            Next Lesson - Div & Span Next Lesson