CSS - Using the Cascade

Learning more about the effects of Cascading Style Sheets

[pageoneresults]

I've always paid very close attention to all topics related to CSS. Just recently I've seen more talk concerning the cascade effect of style sheets and decided to study up a little more. I just managed to trim 1k from one of my style sheets by doing this...

This is the previous style...

a:link{text-decoration:underline;color:#226099;background:transparent;}
a:visited{text-decoration:underline;color:#226099;background:transparent;}
a:hover{text-decoration:none;color:#005631;background:#efefef;}
a:active{text-decoration:none;color:#00ac62;background:transparent;}

.anu:link{text-decoration:none;color:#226099;background:transparent;}
.anu:visited{text-decoration:none;color:#226099;background:transparent;}
.anu:hover{text-decoration:none;color:#005631;background:#efefef;}
.anu:active{text-decoration:none;color:#00ac62;background:transparent;}

.apr:link{text-decoration:underline;color:#005631;background:transparent;}
.apr:visited{text-decoration:underline;color:#005631;background:transparent;}
.apr:hover{text-decoration:none;color:#226099;background:#efefef;}
.apr:active{text-decoration:none;color:#00ac62;background:transparent;}

This is the new style...

a{text-decoration:underline;background:transparent;}
a:link{color:#226099;}
a:visited{color:#226099;}
a:hover{text-decoration:none;color:#005631;background:#efefef;}
a:active{text-decoration:none;color:#00ac62;}

.anu:link{text-decoration:none;color:#226099;}
.anu:visited{text-decoration:none;color:#226099;}
.anu:hover{text-decoration:none;color:#005631;background:#efefef;}
.anu:active{text-decoration:none;color:#00ac62;}

.apr:link{color:#005631;}
.apr:visited{color:#005631;}
.apr:hover{text-decoration:none;color:#226099;background:#efefef;}
.apr:active{text-decoration:none;color:#00ac62;}

From the W3C...

"The purpose of cascading is to find one "winning declaration" among the set of declarations that apply for a given element/property combination."

In the above instance, my parent element is "a".

I bascially stripped out all the repetitive properties and values and placed them in the parent element. This represented quite a savings in bytes and right now I'm looking to trim my css back to 4-6k for one particular site.

I'm not the css guru that tedster, papabaer or Nick_W are, but I learn something new every day and I think the cascade is a very important element in working with css. Speaking of papabaer, where the heck has he been? ;)

Would anyone else care to chime in and help explain the Cascade and provide examples of common declarations and how the Cascade would be used. I think that would help all of us to start focusing on using optimized css whenever possible.

First reference of course is the W3C...

Cascading and Inheritance [w3.org]

P.S. How much more can I trim from the above code?

[tedster]

a{text-decoration:underline;background:transparent;}
a:link{color:#226099;}
a:visited{color:#226099;}
a:hover{text-decoration:none;color:#005631;background:#efefef;}
a:active{text-decoration:none;color:#00ac62;}

.anu:link{text-decoration:none;}

.apr:link{color:#005631;}
.apr:hover{color:#226099;}
.apr:active{color:#00ac62;}

All the dropped rules should inherit from the initial rules for "a:". The page should display identically.

[pageoneresults]

Thanks tedster, that worked perfect. For some reason I could not get it all to work out when I first tried it. After cutting and pasting your code it all clicked (no pun intended). ;)

One of the areas I've been having issues with is the cascade from the body declaration. For some reason, Opera and Netscape do not show the proper font declaration for <h> or a few other block elements. Any idea why this may be?

[pageoneresults]

I'd also imagine that this property...

background:transparent;

is one that will be used in most, if not all parent elements. Would I be correct in assuming that?

[madcat]

One of the areas I've been having issues with is the cascade from the body declaration. For some reason, Opera and Netscape do not show the proper font declaration for <h> or a few other block elements. Any idea why this may be?

Nick saved me on that one earlier today:

Be aware that on some browers a declaration on the body element won't cascade to divs inside the body.

A safer solution would be something like this:

p, li, div, td {
font-family: arial, helvetica, sans-serif;
font-size: 20pt;
}

By the way, thanks pageoneresults- I forgot I could use background: transparent; that helped me out of a big jam I'd been in;)

Also, you might find these threads relative...
[webmasterworld.com...]
[webmasterworld.com...]

Papabaer?

[pageoneresults]

Ooh, madcat, simple but elegant! That just took the file down by another 1k. Never thought of pulling inheritance from the individual parent blocks. Hehehe, css talk!

tedster, what have you done to address the font declaration issues?

[mivox]

On my most recent CSS design, I chose a very basic font style and declared it like so:

p, li, blockquote { font stuff here }

Then I used classes to declare larger heading styles, or anything more specific further down the list in the css file.

If you're using tables in your layout, you can declare your main style with:

p, li, td, tr, blockquote

to take care of that pesky "stylles disappearing inside table cells" problem.

Of course, another great cascade effect is the "hide the fancy stuff from NN4 with @import" trick. That's totally indispensible in my book. And, any absolutely oddball one-time style declarations can be declared inline in the html document, to trump everything that's come before.

[pageoneresults]

tedster, I now have an issue where my <a name> bookmarks have an underline. Prior to the trimming down of css, they were fine. I just tried removing the underline from my "a" parent element and that did not work. Do I have to use a special class now on my bookmarks?