I'm pretty sure a CSS project is what most of you wanted for Christmas, right? Well, maybe not, but that's what you're getting from me. I've been meaning to give CSS a real workout so I finally got round to making a website that fully uses CSS for layout as well as easy re-styles.
I'd been asked a few times recently for some recipes I'd cooked up, and I have to rely on the original html file I created years ago that's no longer online. So, I thought I could spruce up this page and make a CSS site for my recipes:
A 'snazzy overview' of the site. © Beats! Design (2009)
The site was to rely on:
- Divs defined for every separate part of the page.
- A variety of CSS styles to give variety and print options.
- PNGs with invisibility, so they suit every style.
- Backgrounds with opacity for the recipe title.
- A stylised form menu to suit each page.
- CSS corrections for major browsers.
Various design elements across the site. © Beats! Design (2009)
Although some of these requirements were just for design purposes, the CSS coding was designed to allow major re-styles of the page just using a new CSS file. This would give each page a print version (few graphics, black and white) and two design versions (one white on black, one black on white).
Anyway, the best thing to do is check it out. I've only got 3 recipes up for now (I'll add some others as time passes) but do check out the Christmas recipe as it's one of my favourites and then it makes this post seasonal :)
The Christmas recipe in all its glory. © Beats! Design (2009)
This site (and plenty of others) shows that CSS can be used very effectively to re-design a page with the same HTML content. I don't think it's that important to give users many re-styled versions of a page, but a simple print version is one way to aid the user. It also shows a sleek design can be achieved without relying too heavily on graphics.
Beats! Design - Recipes
Recipe: Christmas Pudding Sauce 
