3.3 Use style sheets to control layout and presentation

Make sure that when you create your pages, you do so with the proper structural tags and then use style sheets to control presentation and layout. First design pages that make sense without style sheets (i.e. write the page in a "logical" order) and then apply style sheets to achieve visual effects. If you use markup correctly, a page still displays correctly and is structurally sound even without an associated style sheet. What you are looking for, ideally, is a page that reverts to almost zero style when this is disabled - a case of 'less is more'.

You should:

• Use mark-up as it was intended to be used to show structure: a level one heading is <h1>, put a quote in a <blockquote> tag, and so on. The opposite also applies: don’t use header tags to increase font size, or blockquotes to create page margins
• Use the <em> and <strong> tags to indicate structural emphasis rather than the <b> and <i> tags. Browsers may render the <em> and <strong> tags in a variety of ways (font style changes, speech inflection changes, etc). Use the <b> and <i> tags to create a visual presentation effect
• Use style sheets to define the fonts, sizes and colours used for text, headings and hyperlinks and the positioning of tags on the page

You can use the following CSS techniques to control the format and position of text:

• Use style sheets to format text rather than representing text in images. This means that the information on your page is available to a greater number of users (with speech synthesizers, Braille displays, graphical displays, etc.)
• Use the text-indent property to indent text. Do not use the <blockquote> or any other structural tag
• Use the letter-spacing and word-spacing properties to space out text. For example, don't write "H E L L O". Users generally recognise this as the word "hello" but screen readers would read individual letters. Instead, create the same visual effect with the word-spacing property applied to "HELLO". Text without spaces transforms more effectively to speech
• Use the white-space property to control the white space around a tag
• Use the direction and unicode-bidi properties to set the text direction
• Use the :first-letter and :first-line pseudo-elements to refer to the first letter or line of a paragraph of text

The following example shows how to use style sheets to create a drop-cap effect:

<style type="text/css">
.dropcap {font-size : 120%; font-family : Helvetica}
</style>
<p><span class="dropcap">O</span>nce upon a time...
</p>

You can use the following CSS techniques to control layout, positioning and alignment:

• Use text-indent, text-align, word-spacing, and font-stretch to control spacing without adding additional spaces. Use text-align: center instead of the deprecated <center> tag
• Use the margin, margin-top, margin-right, margin-bottom, and margin-left properties to create space on four sides of a tag’s content instead of adding non-breaking spaces (&nbsp;)
• Use float, position, top, right, bottom and left properties to control the position of almost any tag. You can use the positioning properties to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more
• Use the empty-cells property to leave table cells empty and still give them proper borders on the screen or on paper. Don't fill a data cell that is meant to be empty with white space or a non-breaking space just to achieve a visual effect

Don't use on images to control layout. Many people use lots of little images to get round the fact that HTML isn't very good at layout. These images make it diffcult for browsers to recognise what is content and what is spacers. Set your margins, padding, spacing and positioning in your style sheet.