DEV 2.2 Use style sheets to control all formatting and layout where possible

Cascading style sheets (CSS) are powerful when used properly.

The effort required to get to grips with them is rewarded by the increased ease of making changes and increased accessibility and flexibility.

  • Always use style sheets for formatting:
    • Use for colours, fonts, sizes etc.
  • Use style sheets for layout as much as possible:
    • The use of tables for layout is acceptable as long as they provide the information in a sensible reading order (see DEV 8.2.)

tip: make sure the page displays correctly and makes sense when style sheets are not supported, disabled or overridden.

the advantages of stylesheets


  • Make it easier to keep HTML coding clean and structural;
  • Give more precise control over layout and formatting:
    • changes only have to be made in one place to take effect over all documents using the style sheet;
  • Help create a consistent look and feel across pages that use the style sheet;
  • Reduce the file size of the web page:
    • this makes download time for pages faster and places less load on the web server.

In addition, stylesheets give more potential flexibility to the way your information is displayed:

  • Alternative stylesheets can be offered on your site so that your visitors can choose a presentation that best suits them (e.g. make the text larger);
  • People will be able to use their own personal stylesheets to control aspects of your site's presentation.

<style type="text/css" media="screen">

@import url(content.css);</style>

<link rel="stylesheet" type="text/css" media="print" href="contentprint.css">

Deprecated styles: Most of the HTML tags and attributes commonly used for visual formatting are now deprecated, use CSS instead.

CSS for layout: Browser support is now at a stage where this is a reality and should be used where possible. At present a number of 'tricks' or 'hacks' are required to get cross- browser support, this should decrease as browser support continues to be enhanced.