Example for Checkpoint
6.1, continued.

Slide 53 of 120
Previous slide. Next slide.

This styled text appears to be the same as in the previous example:

The quick
brown fox
jumps over
the lazy dog

Happy face: good choice! This example uses style attributes to specify
the vertical as well as the horizontal positioning:

<STYLE TYPE="text/css">


.part1 /* The quick */ { color: red; font-size: 14pt;

padding-left: 0; margin-top: 40px;

font-family: copperplate gothic bold, fantasy, sans-serif }

.part2 /* brown fox */ { color: brown; font-size: 10pt;

padding-left: 100px; margin-top: 30px;

font-family: times new roman, desdemona, serif }

.part3 /* jumped over */ { color: purple; font-size: 18pt;

padding-left: 200px; margin-top: -60px;

font-family: desdemona, times new roman, serif }

.part4 /* the lazy dog */ { color: blue; font-size: 24pt;

padding-left: 350px;

margin-top: -100px; margin-bottom: 100px;

font-family: fantasy, copperplate gothic bold, sans-serif }



By letting the style commands lay out your text on the display,
you can order the content logically in the HTML file, like this:

<DIV class=part1>The quick</DIV>

<DIV class=part2>brown fox</DIV>

<DIV class=part3>jumped over</DIV>

<DIV class=part4>the lazy dog.</DIV>

So, if style sheets were turned off or not supported in your browser, you would read:

The quick
brown fox
jumped over
the lazy dog
Up one level To Checkpoints for Guideline 6.
Next slide: Example for Checkpoint 6.2

Introduction: Overview Guidelines: Overview Checkpoints: Overview Examples: Overview

Previous page. Next page.

Chuck Letourneau & Geoff Freed

W3C Web Accessibility Initiative

Copyright © 2000 W3C