Using CSS (Cascaded Style Sheets) to Create Clear Content

This document shows some ideas for using CSS to create clear content.

This document is a first working draft only. It has been created to test ideas and promote discussion. If you have any comments or would like to participate in this effort email us or join LD web guidelines list.

Introduction

CSS is a very useful tool for creating clear and usable web pages. You can use CSS for highlighting any important concepts and the structure of your page. Reusing your style sheets keeps the layout consistent across your pages and helps users learn and anticipate how styles are used.

Techniques

1 Set "easy to read" style defaults for your page

1.1 Use white space to separate ideas and paragraphs.

Code explanation:

• Text-indent will give a margin effect to paragraphs
• Padding-bottom and padding-top will give white space at the top and at the bottom of each paragraph.

1.2 Use a clear default font such as Arial or Comic Sans.

1.3 Use colored paper instead of white. Cream or off-white provides a good alternative. In all CSS examples keep a high contrast between the background and foreground.

2 Help the user follow the structure of the document

You do not want too many colors and font sizes used on a page. However, changing colors and size of fonts can help people follow the structure of your pages. For example, use a different color for each heading level on your site.

Note: For this to work well the main HTML document must have had headings tagged consistently as headings. Also, the correct heading level should have been used, such as the h1 tag for all headings of level one.

3 Making important text stand out and highlight key concepts.

3.1 Using CSS classes

In general, to use CSS well you want to create CSS classes for types of content that have a similar role.

For example, you can create a CSS class for warnings, notes, examples or any other type of text that have similar roles.

Then you can easily make each type of text stand out. At the same time, you can make it clear to the user what they need to look at and what it represents.

Avoid italics which are harder to read. Avoid all capitalized sentences as these are also harder to read.

3.2 Boxes

A good mechanisim for making text stand out is putting a box around very important content.

3.3 Pictures

Another excellent way to help people follow your site is to use pictures and symbols.

In this example each paragraph with a class warning will have a picture of an exclamation mark before it.

In this example headings level 4 with a class of tool has a background image of a tool. The text has been indented so it will not write over the picture.

LD web standard CSS classes

CSS classes can also be used to alert the user or the assistive technology that sections of text have a given or known role and should be treated differently.

Summary of LD web standard CSS classes

• Complex: This class is used to indicate that the text is complex. A simplification may be available in the title attribute of the tag.
• Clarification: This class is used to indicate that the text is ambiguous. A thesaurus equivalent of how the word is used may be available in the title attribute of the tag.
• Glossary: This is a class used for links that take users to a glossary or simple explanation of the linked to term.
• NonLiteral: This class is used to alert the user that the following text is not to be taken literally. A clear text explanation may be provided in the title.
• Supplemental: This class is used to mark content that the user may not need in a summarized version of the page
• Important: This section is highly important to the user. It should be included and emphasized in a summarized version of the page.
• Warning: This text is an important warning for the user
• Instruction: This section of text tells the user what to do
• ExtraHelp: This section of content should normally not be displayed. In a version where more help, such as symbols or pictures are needed, this content should be displayed. To ensure this class is not normally shown, set display to not visible in the default style sheet.