#007: What I did on my Stylesheet Part 2: Classes and Ids

(Previous: Part 1: Reset CSS)

Two of the basic building blocks of CSS are id and class selectors. They are used along with html tag selectors so you can customize the context of your styles or, in other words, what on your webpage receives what style?

The id selector is only meant for one, unique element. You won't break your page by using ids incorrectly but  good luck on getting your html and/or css validated.


View the Rendered Result

The class selector is meant for many elements. If you find yourself creating different ids to do the same things over and over again, consider taking out the repetition and adding it to a class.


However, the class attribute in HTML can do so much more! What usually isn't taught is that you can have multiple class selectors (seperated by a space) in an attribute. The following markup validates and works in all browsers:

<p class="redText blueBackground">Insert some text here</p>

Here is an example of page using mulitple class selectors

The obvious question becomes: Why would I want to have two classes to achieve a paragraph with red text and a blue background when I can just combine the two into one class and call it a day?

The answer is CSS 3. CSS 3 is still in its early stage and therefore it is not universally supported and standardized. A lot of people are still using browsers (Internet Explorer) that do not support CSS 3. Even the browsers that support CSS 3 do not support the same things. So if you want to use CSS 3 for the extra 'cool visual' factor, but want to ensure that people who don't have the latest browsers still get a nice looking page, progressively building up styles with multiple class selectors is a great idea.

Let's look at this design that I created using Microsoft Expression Design:

 (FAU Students: If you have access to MSDN, you can download the entire Microsoft Expression Studio suite (Microsoft's answer for Adobe) for free.)

Notice the rounded corners and gradients. Before CSS 3, if one was deadset on having gradients and rounded corners you would have to create extra images and wrapper divs (or a dreaded table layout) to pull it off. Which was fine, but all those extra pictures add up. CSS 3 allows you to achieve the same look with less hassle and a faster loading time.

Here is my html code for the above design:


In the code I do not link to a stylesheet or write one inline but I did add unique ids to some major elements in preparation.

Now it is time to write the CSS. For me, creating styles is a lot of trial and error, especially considering multiple browsers. I also used two websites I linked to in previous posts, CSS 3 Please! and the CSS3 Gradient Generator for the CSS3 found in my stylesheet.

This is the final result:


Note: If you wish to validate your stylesheet, you may run into problems with your CSS3. CSS3.info goes over this issue and you can read their thoughts there. One of the solutions is to comment out the CSS3 and run it through the validator. It's not perfect, but perfection will unfortunately have to wait.

Here is the updated .html file. Notice the progressive build-up of CSS1/2 and CSS3 classes.


View the Rendered Result

Next post in this series will go over how to check your design across different browsers.