Today on Blogcritics

Conquering CSS

Please Share...Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0Share on TumblrShare on StumbleUpon0Share on Reddit0Email this to someone

Ah, the Internet–a wide open space with no rules, limited only by the imagination. Back in “the day,” anyone could make a website on Geocities–I did it myself. So if you’re wanting to satiate your inner nostalgia, or if you’re just simply some kind of a masochist, it’s still possible to put together a site using simply Notepad (or TextEdit, for those Mac users among us) and, say, Photoshop Elements, or whatever cheesy image editing software Dell included in your default bundle, just like most of us did all the way back in 1993.

But, just like then, your results are going to be fairly limited, and if you’re planning on doing any kind of semi-advanced page layout, you’ll likely need to use tables–and (just like then) those can easily become nightmarishly complicated if you aren’t using a program like Macromedia Dreamweaver to keep your code under control.

This is why many web designers have embraced the implementation of CSS (“cascading style sheets”), which allows greater flexibility in designing the look and feel of a website. The only trouble with CSS that I’ve found is that it’s a little intimidating for the novice user, especially when you’re getting beyond very basic text formatting. CSS isn’t much like HTML, where there are particular conventions that must be followed and a structure that’s pretty much set (that is, you don’t typically put the <body> tag before the <head> tag, etc.)–it’s much more open-ended, which is fantastic for the creative designer-types who thrive on a lack of rules and structure. Annoyingly this can make CSS a little hard to grasp at first.

In many instances I’ve had a particular idea for a website design element and realized that HTML would make implementation tricky, if not wholly impossible. In these cases, my first thought is usually, “I could probably do it with CSS!” But then I realize that I have no clue how to do whatever the amazing and wonderful thing is that I’ve thought of, and I give up. This is not quite as big of a problem now that I’ve got a copy of the CSS Cookbook by Christopher Schmitt (O’Reilly, ISBN 0-596-00576-8) in hand.

Touted as a guide to “quick solutions to common CSS problems,” I find the recipe book analogy to be particularly appropriate. The book is divided into ten chapters, each of which contains anywhere from ten to twenty examples of common “projects” undertaken using CSS. Each “recipe” contains a short description of the project, a snippet of CSS code that can be used to do it, and then further resources and explanations, sometimes going into surprising depth (i.e., a research project on the effectiveness of breadcrumb navigation, etc.).

So, for example, say you’d like to use HTML’s handy bulleted list function (<ul>), but you have a small icon of your own design you’d like to use as the bullet instead of the default dot or square. Schmitt explains how to redefine the ul property so that your image can be used, gives visual examples of what this might look like in implementation, and then makes some important notes on bullet sizes, inheritance and so forth.

The book wraps up with a chapter containing examples on how to design using CSS–that is, how to create unconventional or unusual effects using CSS to make a particular page “pop.” While some of these effects are clever and useful (e.g., placing a drop shadow on an image), others seem as though they’d be easier accomplished in Photoshop. Given some browsers’ tendencies not to render CSS correctly, especially some earlier iterations of Netscape and even Microsoft Internet Explorer to some extent, if you want to insure that graphic elements on the web look correct, I wouldn’t recommend relying on CSS to create sophisticated graphical effects.

Especially useful for the less-seasoned designer who isn’t tremendously familiar with CSS, and equally helpful for the web designer who just wants to add a few tricks to his or her “repertoire,” this hearty volume provides a wide variety of plugin-ready tricks and tools that just about anyone (short of the most knowledgeable designers) will find invaluable.

Powered by

About Ryan Eanes

  • http://www.templestark.com/blog Temple Stark

    Sweet, nice review . You show where it was useful. And I need that, soon, like now.

    I’ve just started using Dreamweaver’s CSS templates and figurin gout how they work.

  • http://www.86st.net Ryan Eanes

    The book is helpful in that it shows the code specifically as it applies to the particular examples, so there’s no need to have to figure out vague CSS code. Good luck!

  • http://paperfrigate.blogspot.com DrPat

    I cut my editing teeth on page-layout fossils like Ventura Editor, so style sheets are part of my native tongue. That said, I have had my battles with CSS and tables, and am looking forward to using this reference to achieve victory.

    Thanks for doing the advance scouting!

  • Bryce Eddings

    Listed at Advance

  • http://zardozz.com/zz/ Z.Z.Bachman

    Nice to see an article posted on CSS. O’Reilly publishing also has a nice CSS pocket reference written by Eric A Meyer as well. The O’Reilly series are actually pretty helpful for intermediates.

    ———————————————————————–
    ZZ Bachman / ZardozZ News & Satire Portal
    Have a Blog? Ring Surf it @ ZZ OpenRing

  • http://dumpsterbust.blogspot.com/ Eric Berlin

    Thanks for this great and informative review. It sounds perfect for someone like me — familiar with CSS on a very basic level but would be lost in the woods trying to do something anywhere near complicated.