Using CSS (Cascaded Style Sheets) to Create Clear Content

LD Web home page

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 of 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 in order to not overwrite the picture.