Welcome to WebmasterWorld Guest from 54.226.32.234

Forum Moderators: not2easy

Message Too Old, No Replies

CSS - Using the Cascade

Learning more about the effects of Cascading Style Sheets

     

pageoneresults

3:25 am on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

3:47 am on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

3:53 am on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

3:59 am on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

4:08 am on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

4:22 am on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

4:34 am on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

4:35 pm on Sep 24, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month