tags & the like. There seems to be some confusion on exactly what CSS is and..." />

News of the Day

Using CSS

Posted on October 3, 2003 at 10:52 AM in Using CSS | Permalink

I'm starting a series on this site called "Using CSS". CSS is the standard way to format your website, as opposed to using <font> tags & the like. There seems to be some confusion on exactly what CSS is and what you do with it. So this will be a series of tips, tricks & best-practices for using CSS properly to achieve good site design. The point will be to understand what CSS is and why & how it should be used.

First, what is it? CSS stands for Cascading Style Sheets. For a definition I defer to the W3C, the World Wide Web Consortium:

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

In principle, HTML is designed only for content & structure. That is, what your web site is saying and how that information is organised (Paragraphs, line-breaks, lists, quotes, etc.). Style information should not be contained in HTML. All style information, including layout information, should be contained in CSS. For this reason tags like the <font>, <b> & <i> tags that used to be (and still are) used are now depreciated by the W3C. Unfortunately this is not enforced by browsers, so people still use it.

Of course, if browsers still recognise the depreciated tags, why worry about content-style separation? Well there are a number of good reasons.

  1. It's good practice. This is more of an 'in principle' reason.
  2. CSS is easier it is to maintain, and quicker to develop in the first place. By changing a few lines in CSS you can make site-wide changes in seconds.
  3. It makes your site more accessible. If your site uses CSS and someone comes to it with a browser that doesn't understand CSS, then it will simply display your content, which may not look as pretty, but at least they will be able to read it. Also standards-compliant sites are more easily interpreted by screen readers for people with sight disabilities. Separating your content from your style info makes it much easier for people to access your content.
  4. It gives you the ability to have multiple design layouts for a single site. Have a look at the CSS Zen Garden for a great example of this.

  5. You don't have to use <table> tags to control layout positioning!
  6. It future-proofs your site. Just because the browsers display <font> tags now doesn't mean that they always will (here's hoping they don't)
Here are a few other articles on the topic for those who aren't quite convinced yet:

So in the coming weeks/months I'll hopefully be able to show you how to use CSS to create a well-designed & well-structured web site.

TrackBack - https://www.typepad.com/services/trackback/6a00d8341f134553ef00e550276ea28833

Listed below are links to weblogs that reference Using CSS:

Comments

I'm looking forward to this.

# Posted by: Swami Prem (68.226.106.77) at Oct 4, 2003 12:06:31 AM

"I wish the real world would just stop hassling me" - Rob Thomas