Lesson 7: Identification and grouping of elements (class and id)
Ak Patel
---
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
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.
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
Let us try to specify some classes in the example above:
We can hereafter define special properties for links belonging to whitewine and redwine, respectively.
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.
What is special about the attribute
The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an
Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:
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="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
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="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Identification of element using id
In addition to grouping elements, you might need to identify one unique element. This is done by using the attributeid.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>
...
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>
...
#c1-2 {
color: red;
}