Please enable javascript to view this page in its intended format.

Queen's University
 

Web Standards and Accessibility Guide

Cascading Style Sheets

NOTE: While this document attempts to briefly explain the benefits and usage of Cascading Style Sheets (CSS), they are of significant enough complexity that this document cannot address their full usage or development adequately.

Style sheets define how documents are presented on screen and in print. CSS benefits accessibility primarily by separating content from presentation - allowing the HTML to represent the logical, semantic markup of the content while the style sheets control character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the HTML in their documents, make style changes across an entire web site by making a code change in single file, and make their site more accessible at the same time. CSS also allows users to override author styles. This is very important to users who cannot perceive a page with the author's chosen fonts, font-sizes or colours. Furthermore, CSS allows users to view documents with their own preferred settings by specifying them in custom user style-sheets, which they can then apply to the author's semantically correct, marked-up text.

Currently, there are various levels and profiles of CSS as outlined by the World Wide Web Consortium:

CSS level 1 (1996, 1999)

CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need. Most modern browsers today support all of the CSS 1 Specifications. (www.w3c.org/TR/REC-CSS1 )

CSS level 2 revision 1 ("CSS 2.1")

CSS level 2 revision 1 ("CSS 2.1") contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. The majority of today's modern browsers support most of the CSS 2 Specifications; some specific elements are not yet supported, or poorly supported. (www.w3c.org/TR/CSS21)

CSS level 3

CSS level 3 is under development. It includes all of level 2 and extends it with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more.

Developers are encouraged to author to the current standards, but are at the same time cautioned to do appropriate cross browser testing to ensure that no critical functionality is lost when using some of the more advanced CSS 2.1 attributes.

In very simple terms, Cascading Style Sheets allow web developers to attach "styles" to HTML elements. The technology further allows for fragmentary or unique classes of similar elements; style declarations can be "global" in nature (covering all documents) down to unique one-off instances. For example, in this document, we have paragraphs of text that are defined structurally using the < p> tag. However, some paragraph's contain the "Standards and Recommendation" declarations, thus not only are they paragraphs, but paragraphs of the "standards" class (as we have decided to define them in our style sheet). In HTML code it would be declared:

<p class="standard"> Standard: All Queen's University web documents must use Cascading Style Sheets for display and formatting purposes.<p>

In the style sheet for this site, then, we can then attach rendering properties to that particular class (for example bold text, or perhaps a different font face, font size, or background colour). The benefits of CSS to developers soon becomes obvious: if, at some later date, we wish to make changes to the way the "Standards and Recommendations" are displayed (or rendered), we need to make but one change and the entire site will reflect those changes. Thus, Cascading Style Sheets speed the development process considerably.

Standard: All Queen's University web documents must use Cascading Style Sheets for display and formatting purposes.

Recommendation: All Queen's University Style declarations should be in separately referenced files.

There are four methods of applying Cascading Style Sheet styles to an HTML element: inline, embedded, linked, and imported. The word cascading describes the true power of these style sheets. Depending on which method you use to incorporate styles into your html documents, you can change the display for one particular element in a specific document (inline), or with one simple edit of a css file, change the properties of an element in an entire site of many HTML documents (linked or imported)... hence the cascading which describes the sequence of "inheritance," or the order in which the methods are interpreted by the browser.

As the page opens and the browser reads the HTML tags, it starts with the <head> attributes. Where it may read a call to an external style sheet through a linked or imported style sheet call, it then finds and interprets the .css file and applies those CSS tag properties to the content in the body.

If the browser then reads a set of embedded instructions located between the head tags, the previous instructions from the external style sheet will be replaced by the newer embedded instructions.

When the browser begins reading the content between the body tags, and there is an instruction within an HTML tag, any previous conditions are replaced by that inline instruction.

While all four methods of incorporating styles, as outlined above, are valid and have their uses, it is recommended that style sheets developed for Queen's University be attached through linked CSS files. The inline style declaration should be avoided whenever possible.

Standard: All Queen's University Cascading Style Sheets must be validated.

Like HTML, Cascading Style Sheets follow a series of Standards. As in HTML, for developers to ensure cross browser compatibility and "future-proofing", the Style Sheets must also be valid. Fortunately, online validation tools also exist to aid developers achieve this Standard.

See:

Kingston, Ontario, Canada. K7L 3N6. 613.533.2000