Identification and grouping of elements (Class and ID) - CSS Tutorial 7

Sometimes you want to apply a special style to a particular element or a particular group of elements. In this lesson, we will take a closer look at how you can use class and id to specify properties for selected elements.

How can you color one particular headline differently than the other headlines on your website? How can you group your links into different categories and give each category a special style? These are just examples of questions we will answer in this lesson.

Grouping elements with class

Let's say that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this:

 
 <p>Grapes for white wine:</p>
 <ul>
 <li><a href="http://upload.wikimedia.org/wikipedia/commons/7/76/Riesling_grapes_leaves.jpg">Riesling</a></li>
 <li><a href="http://blog.windsorvineyards.com/wp-content/uploads/2011/05/chardonnay4.jpg">Chardonnay</a></li>
 <li><a href="http://upload.wikimedia.org/wikipedia/commons/b/b3/Pinot-blanc.jpg">Pinot Blanc</a></li>
 </ul>

 <p>Grapes for red wine:</p>
 <ul>
 <li><a href="http://www.winesofchile.org/site/wp-content/uploads/2012/01/cabernet-sauvignon-03.jpg">Cabernet Sauvignon</a></li>
 <li><a href="http://www.kamiljuices.com/assets/images/grape-photos/italian/merlot.jpg">Merlot</a></li>
 <li><a href="pn.htm">Pinot Noir</a></li>
 </ul>

 <p>Click on any of the Grape link and its picture will be opened</p> 
 

The Result:

Two groups of links

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Grapes for red wine:

• Cabernet Sauvignon
• Merlot
• Pinot Noir

Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.

To achieve this, we divide the links into two categories. This is done by assigning a class to each link using the attribute class.

Let us try to specify some classes in the example above:

 
 <p>Grapes for white wine:</p>
 <ul>
 <li><a href="#" class="whitewine">Riesling</a></li>
 <li><a href="#" class="whitewine">Chardonnay</a></li>
 <li><a href="#" class="whitewine">Pinot Blanc</a></li>
 </ul>

 <p>Grapes for red wine:</p>
 <ul>
 <li><a href="#" class="redwine">Cabernet Sauvignon</a></li>
 <li><a href="#" class="redwine">Merlot</a></li>
 <li><a href="#" class="redwine">Pinot Noir</a></li>
 </ul>
 
 

We can hereafter define special properties for links belonging to whitewine and redwine, respectively.

 
 a {
  color: blue;
 }

 a.whitewine {
  color: #FFBB00;
 }

 a.redwine {
  color: #800000;
 }
 
 

The Result :

Two groups of links

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Grapes for red wine:

• Cabernet Sauvignon
• Merlot
• Pinot Noir

This is an example of a link without any class - it is still blue.

As shown in the example you can define the properties for elements which belong to a certain class by using .classname in the style sheet of the document.

Identification of element using id

In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id.

What is special about the attribute id is that there can not be two elements in the same document with the same id. Each id has to be unique. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id:

 
 <h1>Chapter 1</h1>
 ...
 <h2>Chapter 1.1</h2>
 ...
 <h2>Chapter 1.2</h2>
 ...
 <h1>Chapter 2</h1>
 ...
 <h2>Chapter 2.1</h2>
 ...
 <h3>Chapter 2.1.2</h3>
 ...
 
 

The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows:

 
 <h1 id="c1">Chapter 1</h1>
 ...
 <h2 id="c1-1">Chapter 1.1</h2>
 ...
 <h2 id="c1-2">Chapter 1.2</h2>
 ...
 <h1 id="c2">Chapter 2</h1>
 ...
 <h2 id="c2-1">Chapter 2.1</h2>
 ...
 <h3 id="c2-1-2">Chapter 2.1.2</h3>
 ...
 
 

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:

 
 #c1-2 {
  color: red;
 }
 
 

The Result :

Chapter 1

...

Chapter 1.1

...

Chapter 1.2

...

Chapter 2

...

Chapter 2.1

...

Chapter 2.1.2

As shown in the example above you can define the properties in a specific element by using #idname in the stylesheet of the document.

Summary

In this lesson we have learned that through the use of the selectors, class and id, you are able to specify properties for specific elements.

In the next lesson, we will take a closer look at two HTML-elements which is widely used in connection with CSS: <span> and <div>.

Browse More Articles

Tweet

Written by Unknown

Unknown is one of the Team Member of Programmer vs Hacker. He has written many articles on this website and is a patner of this website.