homepage Welcome to WebmasterWorld Guest from 54.226.180.223
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:1197623
 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




msg:1197624
 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




msg:1197625
 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




msg:1197626
 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




msg:1197627
 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




msg:1197628
 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




msg:1197629
 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




msg:1197630
 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