Using Our Style Sheets
Modern web pages must separate content from structure and style. This is accomplished through solid use of (X)HTML and CSS (Cascading Style Sheets). A single stylesheet (vision.css) is used on all DESE web pages. This style sheet defines font family, type, size, color, alignment and additional properties.
In rare instances, in-line styles may be used to obtain a certain effect. Additions or changes to the main CSS should be well warranted, as every DESE document will parse this document even if it does not use particular styles- page load time will increase. The style sheet represents a system in itself; fonts and families have been chosen for their particular relationships together. Straying from the style sheet will result in an non-unified and distasteful representation of the DESE to its users.
To understand and implement styles/classes form the stylesheet main stylesheet vision.css, refer to the visual representation of vision.css
The DESE has standardized on the use of multiple class calls. Conventional css use defines a single class attribute, however W3C recognizes the use of multiple classes, and later (NS5+, IE 4.5+, Opera7) browsers willingly process the code.
The DESE class system as defined in the stylesheet is made of components. By using a component for font family.size, and another for color, multiple definitions can be created with a minimized stylesheet.
Although the code for this single class seems excessive in the style sheet, when used universally on our site, it reduces the need for redundant style types on the stylesheet. In 2/04, the stylesheet was reworked to include the 'multiple class' system, which reduced the file size from 11kb to 5kb. The missing 6kb was at one time loaded with every page call from our site.
When calling classes…
- Call the Font-family/size class FIRST
- Call the Color indicator SECOND
- Call the Weight or special attributes THIRD
To understand further view any DESE web page in conjunction with the stylesheet.
Actual Style Sheet (text file)