CSS Cheat Sheet

Interactive CSS Box Model

Understanding the CSS Box Model is one of the most fundamentally important aspects of CSS-based layouts, but to some it’s a complex concept to comprehend, while to the more experienced it’s a complicated beast to master.

Douglas has put together a VERY good visual representation of the CSS Box Model that appeals not only to the novice, but has a place in the experience developer’s toolbox as well. http://redmelon.net/tstme/box_model/

CSS Input Forms

While it’s true that a lot of websites are informational only, most sites will eventually have some sort of data harvesting function to them (even if it’s only a simple “contact me” form). That’s when most developers are challenged with throwing all their CSS-based layout to the wind and “just doing it with a tables because it’s easier.”

When you reach this seventh level of Hell, turn to Jeff Howden and check out his article on CSS-Only, Table-less Forms: http://jeffhowden.com/code/css/forms/

Graphical Breadcrumbs using simple CSS

As a web surfer, there’s nothing worse than traversing a website, only to get lost in the quagmire of drop-down menus, in-text links, and (worse of all) Flash-based navigation that it’s really navigation at all.

Developers who understand that even the best thought out navigation scheme will eventually become unwieldy on a large enough site provide their users with “breadcrumbs.” Not too dissimilar from what Hansel and Gretle did to help them find their way in the woods, by leaving a trail of bread crumbs, breadcrumbs in your website help users find their way back through your site (and provide you much needed intrasite links for search engine goodness, too). Most breadcrumbs functional, but ugly. Leave it to Apple to make ‘em look nice… and thanks to JankoAtWarpSpeed, you, too, can make pretty breadcrumbs with a little CSS, a few images, and a lot of Apple flavored Kool-Aid: http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx

CSS Positioning

Much akin to the CSS Box Model, positioning elements using CSS can sometimes be an exercise in frustration.

BarelyFitz Designs has one of the best tag-lines ever: Web-standard solutions for a non-standard world, and an article that proves that: Learn CSS Positioning in Ten Steps, http://www.barelyfitz.com/screencast/html-training/css/positioning/

Creating Zen with the CSS Zen Garden

If you’re a web designer or a web developer and you’re not familiar with the CSS Zen Garden, you should probably find a different line of work. No, seriously, get up-to-speed or get out of the game. We’re waiting. The door is right over there…

CSS Zen Garden emphasizes clean separation of content from design; in other words, your xHTML should be semantically structured, verify as valid xHTML, be optimized for content and SEO, and allow you completely style your content via an external stylesheet. Nirvana, or Zen. Doing this helps you to deploy good, structured content and deploy your design separately from the content.

Think about that for a moment:

• you decide to change the look and feel of your site, but the content is staying the same, all you need is a new design (CSS + images) and you’re done!
• your client says they need to have a version of the website for mobile browsers, but you don’t want to deploy an entirely separate site (even if it’s data-fed and you won’t have to “duplicate” data, although that’s what search engines will see) just sniff the User Agent and write out a different stylesheet (with references to smaller, screen optimized, bandwidth friendly images) and you’re done!
• you want to have a different “theme” for (a) the time of day, (b) the day of the week, (c) the current weather conditions, (d) the current holiday season, (e) the winner of the game, (f) the artist of the song you’re listening to, (g) etc., etc., loading up a specific set of styles (rather than modifying the content of the page) is just as easy, and much more flexible

So, if you’ve never been there, or haven’t visited recently, the CSS Zen Garden is waiting: http://www.csszengarden.com/

Did we miss something?

Obviously, the answer to that is a definitive YES!!! No article can hope to cataloging them all… or keeping up with advances coming out every day, so…

Do you have a CSS Tip, Trick, or suggestion? Leave a comment!