Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) are used for the presentation of Web content, enabling Web developers to separate design from structure. Styles can be applied to text, images, dynamically generated content, and to most HTML elements. They are also helpful to control the positioning of items on a web page.

Cascading Style Sheets allow Web site designers to produce Web pages with a consistent look and feel that can be easily updated. The use of CSS can make a site more accessible by making it more flexible so that it transforms more gracefully across multiple display devices.

Problems can exist with Cascading Style Sheets. CSS is not supported equally by all browsers and some references are browser-specific. CSS also allows users with special needs to replace your style sheet with their own style sheet. Additionally, some users of adaptive technology may not be able to access information rendered by a style sheet.

REQUIRED:

Documents shall be organized so they are readable without requiring an associated style sheet. [Section 508, Part 1194.22, Paragraph (d)]

Use style sheets to control layout and presentation. [W3C WCAG 1.0, Checkpoint 3.3, Priority 2]

Use relative rather than absolute units in markup language attribute values and style sheet property values. [W3C WCAG 1.0, Checkpoint 3.4, Priority 2]

The following markup and design techniques are required:

CSS is to be used for the presentation and formatting of Web content. Depreciated elements and attributes should not be used for this purpose. Browser-specific references should be avoided, unless they are solely for visual effects, and only if the information can be clearly discerned when viewed in other browsers. Documents must be coherent, easily readable, and easily navigated if CSS is disabled in the browser.

EXAMPLE:

Depreciated elements and attributes should not be used for the presentation of Web content:

Depreciated example: <FONT color="#990033">Hello</FONT>

Use of embedded CSS: <SPAN style="color:#990033;">Hello</SPAN>

Preferred external CSS reference:

  H3 {
  color: #993333;
  font-weight: bold;
  font-size: 1em;
  font-family: verdana, arial, sans-serif;
  }

  In the document itself:
  <H3>Hello</H3>

CSS styles can be referenced by linking to an external file, or by including the references within the HTML document itself. However, an external reference is the preferred method because it is easier to manage.