Cascading Style Sheets

CSS. Cascading Style Sheets. Why are they named that?

This is a tutorial on how the cascading part of CSS works, and how to work with multiple classes.

The main thing to remember is the basic trump rule. Any newly defined properties overwrite any previously defined properties. Example:

p {color:red;}
p {color:blue;}

Having these two statements in a stylesheet will ultimately result in the <p> tag with blue text. Remembering this basic principle of “overwriting” will keep you on the right track. Here’s a real world example of this:

CSS:

.class1{ font-size:12px; color:#00ccff; font-weight:bold }

.class2{ color:#800080; text-decoration:underline }

HTML:
 <span class = "class1">Something like this would be good to <span class = "class2">emphasize</span>
importance in a sentence</span>

And heres how it looks: Something like this would be good to emphasize importance in a sentence

Not the prettiest looking thing in the world, but it gets the point across. The font size and the font weight remains constant. The color is overwritten when the “class2″ tag is implemented, and the new underline property is added as well.

Now an example of using multiple classes in a single tag. For simplicity, I’ll use the same tags.

HTML:

<p> This time, we are using a standard font, and instead want to emphasize
<span style = "class1 class2">this point</span> and <span style = "class2 class1">
this point</span> as well.</p>

Here’s how it looks: This time, we are using a standard font, and instead want to emphasize this point and this point as well.

Notice the difference, and remember the basic trump rule. The only similar property in both classes is the color, so whichever is the last listed is the one that will be shown.

There are some advanced tags and rules that can modify the basic trump rule, and I will post on those tomorrow.

Stumble it!

Post Info

This entry was posted on Saturday, December 22nd, 2007 and is filed under css, design. It has 75 views

Tags:css, layout, tips

Comments Feed. | Leave Comment | Leave Trackback.

Previous Post: Google’s Android Phone Live! »
Next Post: Blog Rush »

Most viewed posts