There are quite a few meaningful elements to hang your styles on in a typical (x)HTML document. Take a look at a few…

h1, h2, h3, etc.
p, a, ol, li, ul
td, tr, thead, tbody, tfoot
blockquote, fieldset, legend

The list goes on and provides a very good foundation for applying your style rules. Sometimes though you just want a little more control over your pages. There are no dedicated elements to many of the areas of your documents that you would like to have control over. There is a way however to take existing elements and extend their meaning to your advantage by using css id’s and class names.

Think about the way you currently target an element. Let’s take a paragraph as an example. In a typical style rule that targets a paragraph you have your selector, attribute and value.

p {color: red;}

This will affect every p element that your style rule is connected to. This is not always desireable. If you only want to feature a single paragraph in red font, how can you do it without affecting them all? You can assign the paragraph an attribute value pair that sets it apart from the other p elements in your document. There are two ways to do this…

Class

You can assign desired elements a class which is typically used in situation where the affected elements share a common trait or similarity, like a date stamp or a heading style. If you have a number of elements on a page that you would like to feature with a unique style rule, assign them all to the same class and this one class in your style sheet will affect all of them as a group (or a class, like students in a classroom).

ID

Anything you assign an ID to must be unique. They are best at identifying a single unique element on a page, such as the navigation section, or a particular form element. You basically do not want anything other than this one element to receive the stylistic markup from the css, so it must be an id name that is used only once. Of course you could use the same id name on another element, but then they would share the style rule from the css, and now you have yourself a class. You’ll figure it out.

Let’s take a look at some examples…

<ul id="navOne">
<li><a class="anchors" href="#">Home</a></li>
<li><a class="anchors" href="#">Contact</a></li>
<li><a class="anchors" href="#">Profile</a></li>
<ul id="navTwo">
<li><a class="anchors" href="#">Services</a></li>
<li><a class="anchors" href="#">Location</a></li>
<li><a class="anchors" href="#">Site Map</a></li>
</ul>

#navOne{background-color: blue;}
#navTwo{background-color: yellow;}
.anchors{text-decoration: underline;}

We have two lists, and each one has a unique ID assigned to it which makes it easy to style each of the lists different from the other. Each anchor within the li tags has a class of “anchors” which puts them all at the mercy of the exact same style rule as it is presented in the css.

In this way the designer has control over each of the two lists as a whole to set them apart, but each of the anchors will look the same to offer some sort of consistency.

In the css portion above you can see that ID’s are indicated by a hash mark(#) and the name of the id value from the html. Anchors are indicated by a period(.) and the name of the class value from the html.
This is very subjective, and just for the purpose of presenting an example.

There are easier ways to target elements that will allow you to use less code and html markup. We will talk about that in another post. This is simply an intro to ID’s and classes.

Beat it!