
				Pat Quinn, Governor

Content Customization - CSS

*When customizing the style sheet please refer to the Style Descriptions Reference Page to understand what each style effects.

Why use CSS?

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of each HTML page is clearly separated from the presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) created STYLES in addition to HTML 4.0.

Style sheets can save a lot of work. Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in files external to your HTML documents. External style sheets enable you to change the appearance and layout of all the pages in your site, just by editing a single CSS document. If you have ever tried to change the font or color of all the headings in all your Web pages, you will understand how CSS can save you a considerable amount of work.

Customizing the style.css for content area purposes:

In its default form the CSS for the Entity template controls all standard text in the content area. Regardless of tag definitions (<p>, <table>, <li>, ...) all text will appear with the same color, font, and size. Formatting tags (<b>, <i>, <strong>, ...) will alter the text in their respective ways.

Current 'content area' styles:

The default settings that control the content area text are the <body> and <td> tags. Below are the default values for each of those tags.

body { font-family: verdana, arial, helvetica, sans-serif; font-size: 80%; color: #000000; background-color: #FFFFFF; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px: #ffffff; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}

td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; background-color: #FFFFFF}

These styles format content text to mimic that of the State of Illinois web site. The ITO asks that you leave these styles as is to provide consistency State wide. The ITO standard for content sections are black text on a white background. This allows for best readability.

Adding 'content area' styles:

There may be pages in which you need special text for highlighting purposes.

This text is formatted using the style below:

.help_redtext { color: #FF0000}

By adding this style to the style sheet you are able to apply the class to text you are wanting to highlight with a red color. The code used to apply the class is:

<p class="help_redtext">This text is formatted using the style below:</p>

This same procedure can be used to format text within the content area in any different ways.

The style sheet and accessibility:

Relative sizes (%) are used to address an accessibility issue associated with text formatting. If you noticed in the above style definitions the font-size was always defined as a percentage (%). This allows the browsers to use their built in functions that allow the users to control the size of the text. Exact pixel sizes should never be used as they don't allow users to change their text size through their browser. The default style sheet has been designed to be accessible and we recommend keeping the default sizes as they are to maintain usability and accessibility.