Massachusetts Department of Elementary and Secondary Education
Go to Selected Program Area
Massachusetts State Seal
Students & Families Educators & Administrators Teaching, Learning & Testing Data & Accountability Finance & Funding About the Department Education Board  
>  WebTeam Home
>  Accessibility Support
>  Programming Standards
>  Conventions
>  ESE Logos

WebTeam 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 ESE 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 ESE 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 ESE 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 ESE 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 ESE 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 ESE web page in conjunction with the stylesheet.

Actual Style Sheet (text file)

Last Updated: February 13, 2003
E-mail this page| Print View| Print Pdf  
Massachusetts Department of Elementary and Secondary Education Search·Public Records Requests · A-Z Site Index · Policies · Site Info · Contact ESE