Department of Justice Guidance on
Web Pages Using Style Sheets

"Documents shall be organized so they are readable
without requiring an associated style sheet."

Style Sheets

One of the difficulties in maintaining multiple web pages on a single site is presenting a consistent "look and feel" to the visitor. Because the appearance of a web page is controlled by a myriad of HTML tags (such as <b> for boldface, <i> for italics for basic character fonts), creating a multi-page web site that has a consistent style can be challenging. Also, changing that style can be a time-consuming and daunting task.

HTML has evolved to meet this challenge. Style sheets allow web designers to create a basic set of rules governing specified web pages to determine how those pages will appear to visitors. More specifically, style sheets allow a web designer to specify rules of document style (e.g. fonts, margins, colors, etc.) once and have these rules applied to elements of document structure (e.g. headings, paragraphs, tables, lists, etc.). For instance, a web designer can specify in a single style sheet that:

  • all paragraph headings will appear in large, boldface, blue font
  • all paragraph text will appear in small, italic, black font
  • all tables will appear with borders and will have large spacing between table cells

When the web designer decides to change the look of the associated web pages - for instance, changing all paragraph headings to black font - the web designer only needs to make a single change in a style sheet to affect the change throughout those pages.

While style sheets provide uniform control over all associated web pages on the site, a designer may want to override these controls for a specific purpose. For instance, the style sheet may be set up to use an italic font for highlighting, but the designer may decide that on a particular page, bold faced type would better accentuate a highlighted word. Alternatively, the designer may want to depart from the style sheet specifications for an entire web page. For instance, a web page that includes large tables may need a smaller font and hairline borders between cells to display all of the information than is called for on the style sheet. Because these variations in style may occur at different "levels" (e.g. a web page, a paragraph, or a specific word), style sheets provide a hierarchy of rules, with specific rules taking precedence over more general rules. Rules affecting a specific element in a web page will take precedence over rules that affect an entire site. Therefore, when a web browser displays a page, it must look for specific rules first, then less specific rules, then general rules, thus giving these standards the term cascading style sheets.

Because style sheets 'cascade,' they can occur at different locations in a document. For instance, style sheets that affect an entire web site may be included in a separate file, whereas style sheets affecting a specific web page will usually be included at the beginning of the page. Usually, you can find style sheets by checking the HTML source for the word style in an HTML tag, such as <STYLE TYPE="text/css">.

Used properly, style sheets can increase the accessibility of web pages for people with disabilities. Some browsers enable users to use style sheets to set their own preferences for how pages are displayed. For instance, a user with low vision may use a style sheet so that regardless of what web pages he visits, all text is displayed in an extra large font with white characters on a black background. If designers set up their pages to override user-defined style sheets, people with disabilities may not be able to use those pages. For accessibility reasons, therefore, it is critical that designers ensure that their web pages do not interfere with user-defined style sheets.

Another potential problem with style sheets is that only the most modern browsers are compatible with them. In some cases, people with disabilities must use older browsers that work well with their assistive technologies. If a web page can only be understood or used by visitors using the latest browsers that support style sheets, some people with disabilities will be unable to use those pages. Therefore, web designers must ensure that their web pages are usable when style sheets are not supported or when support for style sheets is turned off.

Department of Commerce Web Advisory Council (WAC)
U.S. Department of Commerce

Send questions and comments about this page to WAC@doc.gov
Page last updated October 12, 2010