An Introduction to CSS

By Ben Hunt
2007-12-17


The old way to style content

In the olden days, when you wanted to change the font of your HTML, you would have to use a <font> tag, like <font face="Times">...

If you wanted to set the background colour and border width of a table and the amount of padding in each cell, you'd put <table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">

There were a few serious problems with this type of approach:

1. Because your styles are embedded into your content, it's laborious to write.
2. You have to repeat the same styles over and over again, wherever they appear on a page and across your whole site.
3. It's also lots of work to change the style of your site, as each page and every piece of styling has to be edited one-by-one.
4. It adds extra size to every file.
5. The same styles are seen by everyone, no matter whether they're viewing on a monitor, listening to the content, browsing on a PDA, or printing the content.

Tutorial Pages:
» The old way to style content
» How CSS works
» On-page CSS definitions
» Separate style sheets
» Advantages of separate stylesheets
» How CSS styles apply to HTML elements

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » Overlapping tabbed navigation in CSS » Cascading Style Sheets - CSS