homepage Welcome to WebmasterWorld Guest from 23.23.12.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS - Using the Cascade
Learning more about the effects of Cascading Style Sheets
pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 322 posted 3:25 am on Sep 24, 2002 (gmt 0)

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

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



 
Msg#: 322 posted 3:47 am on Sep 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 322 posted 3:53 am on Sep 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 322 posted 3:59 am on Sep 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 322 posted 4:08 am on Sep 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 322 posted 4:22 am on Sep 24, 2002 (gmt 0)

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

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



 
Msg#: 322 posted 4:34 am on Sep 24, 2002 (gmt 0)

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

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 322 posted 4:35 pm on Sep 24, 2002 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved