Tutorial search
Tutorials
Stuff
Affiliates
Photoshop Templates
Introduction into CSS classes - CSS tutorial
Adding and applying something to a particular element to make it distinctively special from the other element when it appears in the browser is very possible. For example, you want header 1 to have a different font color from headers 2 and 3, or you want each header to have a different color, it is very much doable. You will learn more of these as we go through this lesson.
When you want to group elements with class, this is what you type:
<ul>
<li><a href="ri.htm">Alabama</a></li>
<li><a href="ch.htm">Alaska</a></li>
<li><a href="pb.htm">Arizona</a></li>
</ul>
<p>US Capitals:</p>
<ul>
<li><a href="cs.htm">Montgomery</a></li>
<li><a href="me.htm">Juneau</a></li>
<li><a href="pn.htm">Phoenix</a></li>
</ul>
In case, you want the first two links to be in different color while the rest you want to remain blue, all you have to do is make two categories that will divide the links. You can do this by assigning a class to each link using the attribute class.
<ul>
<li><a href="ri.htm" class="US States">Alabama</a></li>
<li><a href="ch.htm" class="US States">Alaska</a></li>
<li><a href="pb.htm" class="US States">Arizona</a></li>
</ul>
<p>US Capitals:</p>
<ul>
<li><a href="cs.htm" class="US Capitals">Montgomery</a></li>
<li><a href="me.htm" class=" US Capitals ">Juneau</a></li>
<li><a href="pn.htm" class=" US Capitals ">Phoenix</a></li>
</ul>
After assigning a class to each link, you can now define special properties for the links that belong to the two categories.
color: blue;
}
a.us states {
color: #FFBB00;
}
a.us capitals
{
color: #800000;
}
You already know that it is possible to define properties for elements belonging to a particular class and this is done by applying “.classmate” in the document style sheet.