Importing Content with CSS

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 {
padding-top:1.23em; /* 16/13 */
font-size:.8125em; /* 13/16 */
line-height:1.538; /* 20/13 */
#nav strong:before, #nav .this a:before,
#nav a:hover:before, #nav a:focus:before {
#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 {
font-size:1em; }

Birthday Books

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.

Like it, loathe it, love it? Leave a message.

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Website Powered by

Up ↑

%d bloggers like this: