Web Services Team Resources

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.

CSS example

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)

Contact Us

Massachusetts Department of Elementary and Secondary Education
75 Pleasant Street, Malden, MA 02148-4906

Voice: (781) 338-3000
TTY: (800) 439-2370

Directions

Disclaimer: A reference in this website to any specific commercial products, processes, or services, or the use of any trade, firm, or corporation name is for the information and convenience of the public and does not constitute endorsement or recommendation by the Massachusetts Department of Elementary and Secondary Education.