Example for Checkpoint
6.1, continued.
Example
Slide 53 of 120
Slide 53 of 120
Example for Checkpoint |
Example
Slide 53 of 120
|
This styled text appears to be the same as in the previous example:
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 }
-->
</STYLE>
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
To Checkpoints for Guideline 6.
    |
|
|