Written by Ben Hunt from web design agency Scratchmedia. For more information about his agency visit scratchmedia.co.uk

Using CSS (Cascading Style Sheets)

Cascading Style Sheets is a technology that has been around for several years. It's a great way to assign style properties to HTML elements in your web pages, and offers several significant benefits over the old way of putting style information directly into HTML tags.

Benefits of CSS

CSS is flexible

Styles can be written in one place (separate style sheets) and assigned to HTML elements through class or ID properties. It's way easier and quicker to change styles across a whole site when they're defined in one place.

CSS is Lightweight

Using CSS (like class="main-nav") creates far smaller HTML files than writing style into every HTML tags (like border="1" cellpadding="3" cellspacing="1" backgroundcolor="#ffc").

CSS helps separate style from content

Keeping your style definitions separate from your content and content-structure makes it possible to re-purpose the same content for different media. This includes styling pages differently for printing, as well as other user agents like voice (text-to-speech) and mobile devices.

CSS for Web Design: Contents

Introduction to CSS
Beginner's introduction to Cascading Style Sheets (CSS)
Inheritance and Cascading Styles in CSS
Introduction to how styles apply in CSS through inheritance and cascading.
Block vs Inline display style in CSS
HTML elements can be displayed either in block or inline style. The difference between these is one of the most basic things you need to know in order to use CSS effectively.
Datasheet-style form using HTML, CSS and JavaScript
Make a datasheet-style web form using HTML, CSS and JavaScript
Tabular list-style form using HTML, CSS and JavaScript
Create a tabular list-style web form using HTML, CSS and JavaScript

Other CSS resources

Style Master CSS tutorial
A very good place to get a broad overview of what CSS is and what you can do with it.
CSS Basics - Understanding Selectors
Easy-to-follow introduction to CSS selectors; how you apply different styles to different things in CSS.
CSS Help pile
A great collection of links to CSS tutorials, ranging from moderate to advanced level
CSS3.com
A thorough reference of CSS properties, with examples.
40 free CSS layouts for you to use
Multi-column, fixed or liquid layout, every combination is here, tried & tested.
Yahoo! UI Library: Grids CSS
(Not for beginners) Grids CSS is a suite of seven web page templates and the ability to nest grids of one to four columns within the content area of those templates. Together, the combined template and grid system enable you to implement over 100 different CSS layouts using only 1.82KB of includes.
Save the Pixel If you like Web Design from Scratch, you'll love our new ebook.
“Save the Pixel - the Art of Simple Web Design” features loads of new content by Ben Hunt PLUS 21 new web site redesigns that show elegant simple design in action
Get it from SaveThePixel.org now for only £15 - instant delivery in PDF format!