This page is part of the California Department of Education (CDE) Web Design Standards, which only applies to specific CDE Web sites. Visit the CDE Web Standards to determine if these standards apply to a specific Web product (Web site, Web page, Web document, or Web application) that has been developed by or for the CDE.
Most Web pages (not including Web applications) on all CDE Web sites are created using Adobe's Contribute software templates. WebNETS, which is a custom software application that was created by CDE staff, is also necessary in order to create and process most Web pages on the CDE's public Internet site. Portions of these standards, where noted, apply only to CDE users of Contribute or WebNETS software; or to Web application developers.
Abbreviations and Acronyms
Spell out abbreviations and acronyms the first time that they are used on each page. This may be done in the page title, the page description, the breadcrumbs, or in the page content. The abbreviation or acronym should be included in parenthesis so users will know what it stands for.
If the abbreviation or acronym is used in the title, description, or breadcrumbs and is not spelled out with the abbreviation or acronym noted behind the spelled out words, then this must be done at the earliest opportunity in the page content. Compliance with this standard may necessitate adding additional content to the page.
The following standards apply to Web pages. Please see the Web Documents section of these Design Standards for the applicable standards for Web Documents.
All Web pages must use the Arial font.
Use of variable fonts allows Web site visitors to enlarge the text on a Web page. All pages on CDE Web sites must use the variable ems sizing for fonts.
All pages must have a white background with black text as the default for standard non-heading text. The colors that are used for headings are pre-set and included in Cascading Style Sheets. Do not override the colors that are set as default by either choosing different colors, or by using custom style sheets. There are limited instances when the color of normal text may be changed, please see the Color section of these Design Standards for a definition of the site colors and for more information about when text color may be changed.
Text Size Adjustment
Web pages and applications at the CDE will employ a text resize feature.
Do not use underlined text in any Web page, Web application, or Web document. The use of underlined text is reserved for active hyperlinks only. The only exception is that underlines may be used to indicate the text of laws or regulations that are being added, modified, or deleted as prescribed by the California Office of Administrative Law.
By default, this is the standard font for most text on CDE Internet and Intranet Web pages. "Normal" generally equates to the Arial font, size 12, but to make our Web site more accessible, users may change this setting on their own computers when they view or use CDE Web pages.
Use this style to indent text by an equal margin on both the left and right margins. Do not use the "Indent Button." See below for the proper use of the "Indent Button."
Please see the Headings section of the Design Standards for additional information about how headings must be used on CDE Web sites. Here are some samples of the heading styles that are used:
Required for page title and only to be used at the top of the Web page.
Required for the 1st level subhead.
Required for 2nd level subhead.
Required for 3rd level subhead.
Required for 4th level subhead.
Required for 5th level subhead.
No Heading Space (noheadingspace)
Is a special text style that removes space between headings and the text below the headings. See the Headings section of the Design Standards for more information.
Small Text (smtxt)
Use for footnotes or optionally for table text if necessary for formatting purposes.
Large Text (largetxt)
Use for larger table text; not to be used as a heading.
To be used for subscript notations only.
To be used for superscript notations only.
The "indent button" (see graphic below) may only be used if the text is a quotation or passage from some form of published work. Both the indent button and the indent style, as noted above, create a visual indention when they are applied to a block of text. The indent button does this by inserting the HTML <blockquote> tag into the background code of the page. Use of the <blockquote> tag creates accessibility problems unless the text to be indented is actually a quotation. When indenting text is desired, the indent text style should be used instead of the indent button unless it is being used for a quotation.
Double Application of Styles
When applying a text style, avoid applying the style twice to the same text. This may double the emphasis of the style.
No Bullet Style (nobulletstyle)
The No Bullet List style is a special text style that removes the visible bullet or number from an ordered or unordered list. The No Bullet List style is used when a list exists where adjacent numbers or bullets are not appropriate from a visual standpoint. An example might be a list of names, where bullets are not traditionally used adjacent to names, but where accessibility would suffer by not using an ordered or unordered list.
Visible bullets and numbers help to make lists easier to read, so this style should only be used where visible bullets or numbers would be inappropriate. The style should never be used for purely stylistic purposes. In general, CDE Web sites should use visible bullets and numbers for lists as much as possible.
When the No Bullet List style is used, all list elements must be blocked to the far left and no sub-levels or indenting within the list may be used.
For Web Applications
Abbreviations and acronyms for the title of the application or the project/organization name must be spelled out on the application home page or logon page. It is recommended, but not required that they also be spelled out on any referring page or portal for the application. The abbreviation or acronym should be included in parenthesis so users will know what it stands for. Use of only the abbreviation or acronym for the title of the application or the project/organization name is acceptable on subsequent pages of a Web application.