Este estilo parece ser exactamente igual ao do exemplo anterior:
Rapidamente,
o gato castanho
apanhou
o cão molengão.
Este exemplo usa os atributos de estilo para
especificar o posicionamento vertical e horizontal:
<STYLE TYPE="text/css">
<!--
.part1 /* Rapidamente */ {
color: red; font-size: 14pt;
padding-left: 0; margin-top: 40px;
font-family: copperplate gothic bold, fantasy, sans-serif }
.part2 /* o gato castanho */
{ color: brown; font-size: 10pt;
padding-left: 100px; margin-top: 30px;
font-family: times new roman, desdemona, serif }
.part3 /* apanhou */ {
color: purple; font-size: 18pt;
padding-left: 200px; margin-top: -60px;
font-family: desdemona, times new roman, serif }
.part4 /* o cão molengão */
{ color: blue; font-size: 24pt;
padding-left: 350px;
margin-top: -100px; margin-bottom: 100px;
font-family: fantasy, copperplate gothic bold, sans-serif }
-->
</STYLE>
Ao deixar os comandos de estilo formatarem o seu texto no ecrã, pode
ordenar o conteúdo em HTML de forma lógica, como se segue:
<DIV class=part1>Rapidamente,</DIV>
<DIV class=part2>o gato castanho</DIV>
<DIV class=part3>apanhou</DIV>
<DIV class=part4>o cão molengão.</DIV>
E por isso, se as folhas de estilo estiverem desactivadas ou não sejam
suportadas pelo seu navegador, lerá o seguinte:
Rapidamente,
o gato castanho
apanhou
o cão molengão.
Para Pontos de
Verificação da Directriz 6.
Próximo diapositivo: Exemplo para Ponto de Verificação
6.2