Family Cookbook: Can I Borrow A Cup of CSS?


Still a few things left to do before our cookbook project is cooked.

First thing is to get some Cascading Style Sheets (CSS) to give the cookbook some personality on the Web. As you probably guessed from the fact I’m using a canned WordPress theme, I’m not a web designer. But I want to be one when I grow up. I’ve read my share about CSS and played around with it, but never actually used it to build myself a real live website. The last public website that I built was with Adobe PageMill, and I think about 5 people saw it. I did make another with GoLive, but didn’t use CSS.

So I need some inspiration. Something to sweeten up the content. I’ll check some recipe websites and see if I can borrow any good presentation ideas from them. It’s like going to your neighbor and borrowing a cup of sugar. No need to be obscure, so I’ll check some sites like allrecipes.com, epicurious.com and foodtv.com.

Here’s an example from epicurious, which I’m sure is packed with wholesome nutrients, the Devil Dog Cake.

So, if I wanted to ape this style, how do I go about figuring it out?

I know of one indispensable tool for this job, and that is The Web Developer Add-on for Firefox by Chris Pederick. It is an absolute-must-have-go-get-it-now-you-won’t-regret-it kind of thing. If you are trying to learn web design this add-on is priceless, and incredibly it is free. By itself it is reason enough to use Firefox. The Web Developer Add-on allows you to reverse engineer a web page, by isolating every piece of the page, showing the code that styles it, letting you play with it, and save it. To quote Peter Griffin, it’s “friggin’ sweet.”

Saying all that, now I feel shamed into donating something to Chris. Maybe I’ll buy him something off his Amazon wishlist. I’ve got my eye on a Radiohead CD.

Loading the Web Developer Add-on in Firefox gives you twelve menus’ worth of choices to dissect and analyze every aspect of a page. Not surprisingly, we’re most interested in the CSS menu for now.

Choosing View CSS gives you a window with expandable listings of all the CSS a page uses.

With Show Style Information you hover over elements and they become outlined and you get a bread crumb trail showing you exactly where you are in the page model, including class and id info.

If you click, you get a new window pane with all the all the declarations that are making the selected object look the way it does.

And if you really want to play, or if you just like asking “what if” questions, you’ll get a kick out of Edit CSS. It opens a pane where you can change the CSS and instantly see the results. So if I wanted to see what it would look like with my recipe titles in bold red, I just go to the declaration, type in the change and voila.

What if you want to lift the color scheme from a page? No prob, go to the Information menu and pick View Color Information. You get a swatch list of every color used on the page.

You can validate the CSS code with the W3C’s Validation Service to find if there’s anything broken in there that needs fixing. On the Devil Dog Cake page, there’s a div that’s supposed to be gray, but it’s misspelled in the style sheet, “grey.”

One more toy to play with and that is the Edit HTML command in the Miscellaneous menu. This is the flip side of Edit CSS. Now you can change the content and see how the styles look applied to other stuff. I suggest these modest changes.

Now that we can shine an X-ray on any web page, we can find looks that we like and tweak them, preview our changes, and copy and paste the code into our own style sheets. Of course, we’ll also have to change the selectors to fit the structure we got out of InDesign and Dreamweaver. But now we’re really cooking. Mmmm, smell that code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: