Style sheets

Separate presentation from content

Using a handy tool called a "style sheet," you can make a list of rules about visual presentation -- margins, fonts, colors, and so on -- in one place and then apply them everywhere. The result? A consistent "look" for your site, easy maintenance, and smaller HTML files that will load faster.

Web designers can specify content (text and images) in the HTML code and style preferences in a separate style sheet. Each individual HTML page then includes a reference to that style sheet, indicating that the style rules should be applied to that page.

Benefits for users

Keeping content and presentation separate is a crucial principle of accessibility. In its purest (and original) form the web is a conduit for information. On an ideal web, the user has a choice: either access straight content with no bells and whistles, or go for the designed site with colors, images, and other frills.

Unfortunately, many designers do not work toward this ideal. Instead, they embed every visual specification within the HTML document itself, giving users no choice but to see the page as they designed it. By mixing up the content and the presentation in one chunk of code, this approach ignores the true value of the web (as a source of information, not design), and also disregards the important principles of flexible design.

Using style sheets to separate the style from the content helps users, particularly those who are visually impaired. Some users surf the web with a screen reader, a device that reads the content of web pages aloud. These users want to hear your content, not your style declarations. Others can view your site, but only under certain conditions; perhaps they need to have high contrast, like large black text on a white background, in order to read comfortably. These users can create their own style sheets with their specific preferences, and can choose to have their personal style sheets override some or all of your style rules. This is flexible and user-controlled web browsing at its best. (See our page on accessibility for more information about opening your site to users who are disabled.)

Benefits for web designers

Without style sheets, you have to use cumbersome and outdated code in your HTML pages. You will need to specify background color, text color, font face and size, and other visual attributes on each page. Multiply that by all the pages of your site, and you end up with lots of duplicate HTML code! With a style sheet you only need to declare all of these visual attributes once.

Style sheets also make maintenance and updates easier. You can imagine the benefits of having all your style rules stored in one central place. The client decides that they want dark blue headings instead of black ones? No problem. Just change the style rule once in your central style sheet, and the change is reflected in every page of the site. It also makes page creation quicker because you don't have to worry about keeping all of your fonts and colors consistent from page to page -- just link to your style sheet once and you're all set.

Resources

Effective use of style sheets, Jakob Nielsen

[ home | about us | our services | portfolio | web usability | contact us ]

A division of Roberts & Kay, Inc.