Access keys | Skip to primary navigation | Skip to secondary navigation | Skip to content | Skip to footer |
Problems viewing this site

Implementation advice

Serving styles

Styles can be added to a page in a variety of ways: inline, embedded or external. External style sheets are generally preferred as they achieve a greater separation of presentation and content. Site wide presentation changes can be effected by editing a single file.

There are two methods of referring to an external style sheet. By linking ( <link rel="stylesheet" href="qg.css"> ) and by importing ( @import url(qglayout.css) ).The @import rule can appear between <style> tags in the html or within a css file. In both cases it must precede all other rules.

Support for the @import rule was limited among early browsers. Netscape 4 for example does not understand the rule. This can be used to advantage. Netscape 4 chokes on many styles. By placing these styles in a separate style sheet and importing them they are served to the majority of browsers but denied to Netscape 4. This technique is used in the CUE Template. qglayout.css contains styles that are not supported by Netscape 4. By importing them into qg.css we ensure Netscape 4 never gets them.

TIP: Do not combine the styles in qg.css and qglayout.css. The result will be unreadable in Netscape 4. This separation ensures that the template, while not pretty, is accessible in Netscape 4.

It may make sense to separate site styles into separate files. You could link to a distinct style sheet for Agency specific styles. Perhaps some sections of the site warrant specific style sheets. This may make it easier to find and maintain styles.

Last updated December