Tonight I found some cool CSS at StopDesign. See that navigation at the top of screen?
I just love how the words “recent stuff“, “design work“, “background info” and “of interest” are brought in via the CSS.
I’ve chopped from the full CSS how this achieved. I won’t explain too much, as I’m unsure of the CSS skills of my readers.
#nav a:before, #nav strong:before {
display:block;
padding-top:1.23em; /* 16/13 */
color:#975;
font-size:.8125em; /* 13/16 */
line-height:1.538; /* 20/13 */
font-weight:normal;
}
#nav strong:before, #nav .this a:before,
#nav a:hover:before, #nav a:focus:before {
color:#ca8;
}
#n1 a:before, #n1 strong:before {content:"recent stuff";}
#n2 a:before, #n2 strong:before {content:"design work";}
#n3 a:before, #n3 strong:before {content:"background info";}
#n4 a:before, #n4 strong:before {content:"of interest";}
#branding #nav a strong:before {content:"";}
#branding #nav a strong {
background:none;
display:inline;
padding:0;
font-size:1em; }
It’s a technique that’s more often used to bring in images for ordered or numbered lists, but this is by far a better use. The obvious advantage here is that Douglas can change descriptor-text easily throughout the navigation of his site. The way he has it structured with #nxx numbering means he can add more navigation types quickly and easily with minimal fuss.
In this case, Douglas Bowman might decide tomorrow that the “of interest” might be be worded as “interesting” just by changing one line in the CSS.
How much cooler can CSS be on a website? Quite simply, It can’t.
Postscript: Learning CSS
In the event that you want to understand more about CSS and many other aspects, I suggest you head over to these sites few sites.
They are where I sat, studied and smiled whenever I discovered easier ways to format and present information so it appears both logical and aesthetically appropriate.
Creativity & Artwork of Stephen Mitchell 
Like it, loathe it, love it? Leave a message.