Wednesday, June 13, 2012

Week 4: CSS - separating content from design

CSS is a tool that enables Web designers and developers to separate content from design. Before the advent of CSS, each page had to either be designed individually or you had to create a master template for all your pages. There were a lot of sites using frames back then. If you didn't want to use frames, the only option was to use tables. CSS replaced tables and frames with div tags. You can now create content on a simple HTML page and link to a CSS file to incorporate the design. You do that by saving a CSS file to your root directory, as an individual file with a .css extension, and linking to it from inside the Head tag in your pages. The changes you make to the CSS file are applied to all pages in your site. This is very helpful when you have a site with several pages.

As I mentioned in my previous post, I find the W3 CSS tutorial very helpful. It shows you how to create boxes, div tags, and how to style your headers and links.

There is a wealth of CSS sites out there. I've included below a link to my delicious bookmarks for CSS sites. Some of it is really fun to play with and look at. My favorite page for CSS styles is still the CSS Zen Garden web site. There is a menu on the left hand-side of the CSS Zen Garden site with links to different designs. If you click on one of those links, the design for the page will change but the content will remain the same. Designers and graphic artists post their CSS styles to this site, and allow you to download the code. They do ask you to respect copyright laws.

Nowadays, you can create menus, photo galleries, and even games with CSS.

My CSS bookmarks
CSS Zen Garden

No comments:

Post a Comment