Class and ID Attributes in CSS
If you follow any of the popular online forums that discuss HTML and CSS, you'll often see people who are just learning website design post code that misuses the "class" and "id" attributes. It's usually people who are copying and pasting code they've found online into their own pages and struggling to make it all work without learning the fundamentals. So I thought it would be helpful to post a quick tutorial on when to use 'class' and when to use 'id' for CSS.
Class vs. ID
The basic rule for choosing between assigning a 'class' and an 'id' attribute is whether the CSS rules you want to invoke will be needed for many elements or just one particular element in your HTML mark-up. One of the best features of Cascading Stylesheets is that you can control various aspects of the appearance of all of the pages in your website from within a single document, (ie. the stylesheet). Similarly, an individual rule set in your stylesheet can affect many different elements on an individual page, or just one, as your design requires. But you should always use the appropriate attribute on each element whose style you want to set in order to keep your stylesheet easy to maintain and expand over time. Let's get down to specific examples of using class names and id's.
Let's start with the "class" attribute because it is the more powerful, and generally most useful in creating stylesheets. One of the most common uses of a class is to style the text of the primary content of a web page, such as this text right here. If you look at this paragraph of text and the paragraphs surrounding it, you'll see they share the same general appearance. That's because I have a class named "stdtext" defined in my stylesheet that I use for all of the p elements in the main content area of my web pages. Similarly, I have used the class name "centered" on the headline tags to center them, rather than having to add the style attribute "text-align:center" to each one. In this way, class names give you power and convenience. So, for example, to set up a class rule in your CSS stylesheet, you might have:
.stdtext { font-family:times,serif; font-size:1em; color:#444; }
and your HTML mark-up might include something like:
p class="stdtext"Some text./p p class="stdtext"Some additional text./p p class="stdtext"Even more text./p
and your webpage would look like:
Some text.
Some additional text.
Even more text.
In the above example, the CSS rule using the class selector ".stdtext" would be applied to all three paragraphs because they each have their "class" attribute set to "stdtext". As you can see, classes are very helpful in defining the overall appearance of the pages in your website because they can control multiple elements on each page. You can also assign multiple classes to individual elements by separating the class names with spaces (ie. class="stdtext boldText" means both the .stdtext and .boldText rules would be applied to the element), which can be very useful.
Naturally, you'll also often need to control the appearance of individual elements in your web pages. The "id" attribute adds a unqiue identifier to an HTML element on your page. This lets you have very fine control over the appearance of your pages by assigning a special CSS rule in your stylesheet to a particular element. It is important to note that the value of every "id" attribute must be unique so that the browser can match the CSS rules to each identified element as you intend.
#myText { font-size:1.4em; color:#00f; }
and your corresponding HTML might look like:
p class="stdtext"Some ordinary text./p p class="stdtext" id="myText"Some styled text./p p class="stdtext centered"Even more text using two class names./p
and your webpage would now look like:
Some ordinary text.
Some styled text.
Even more text using two class names.
In this case, the middle paragraph would still use the font-family assigned by the class "stdtext", but the font size and color would be set by the "#myText" rule shown above in the sample CSS code. To be clear, you don't need to assign a "class" attibute to use an "id" attribute. You can use the "id" attribute alone. I just wanted to demonstrate the difference between class and id by using similar examples of HTML mark-up. And in the last paragraph, I used two class names to illustrate how you can combine classes to style individual elements.
Multiple class names allows you to either combine CSS rules, or to control their application to specific combinations of classes. Consider our example of multiple class names. You could create a special rule that would only apply to elements using that specific combination of class names:
.stdtext.centered { font-size:1.4em; color:#f00; }
Note that in the rule above there's no space between the class names! When applied to our multiple class names example:
p class="stdtext centered"Apply additional rules only when using these two class names together./p
the result is:
Apply additional rules only when using these two class names together.
As you can see, the rules of both classes are applied as usual, but we've added some additional rules that only apply to elements that use both of these class names.
Summary
There's no great mystery about "class" and "ID" attributes. Once you grasp the relationships of Class->Multiple Elements and ID->Single Element, choosing the correct attribute for HTML elements will come to you naturally as you design your web pages. From there, as your experience and knowledge grows, you'll find how powerful these tools are when you use them in combination with each other.
Once you've mastered the basics of using the "class" and "id" attributes, you can move on to mastering the use of nested or cascading selectors, which allow you to create CSS rules for instances when you need to control the appearance of elements that are nested within other elements, such as when a div with a certain class or id setting contains a p or other element and you want to modify just that particular instance. There's a wonderful article on NetTuts+ titled, "The 30 CSS Selectors You Must Memorize" that will teach you how to get the most out of using CSS selectors in combination.
