Capítulo 6 - Exemplos de Desenhos "Stylesheet"
Exemplo 3 - Externo
Exemplo do documento HTML ilustrando o uso de CSS no formato da primeira página deste curso.
INSTRUÇÕES DE ESTILO : curso.css
/* Modelo da página de apresentação dos cursos */
A:link{
color: blue;
text-decoration:none;
font-family:"EngraversGothic BT", Arial,
sans-serif;
font-size:11pt;
padding-left:0.1em;
padding-right:0.1em;}
A:visited {color:red; text-decoration:none;}
H1,H2,H3,H4 {font-family:"Garamond","Time New
Roman";}
DIV.head{
background:rgb(255,204,0);
margin:30pt auto auto
auto;
width:480px;
color:black;
text-align:center;
padding:0;
border:solid
darkblue;}
DIV.head H1{
text-align:center;
font-size:32pt;
color:darkblue;
font-weight:normal;
text-transform:uppercase;
padding:0;
margin-bottom:-15em;}
DIV.head H2.logotipo{
text-align:center;
font-size:14pt;
color:red;
letter-spacing:12pt;
text-transform:uppercase;
font-style:italic;
padding:0;
margin-bottom:0;}
DIV.head H3{
text-align:center;
font-size:18pt;
color:black;
font-weight:bold;
text-transform:none;
padding:0;
margin-bottom:0;}
DIV.head H4.edition{
text-align:center;
font-size:12pt;
text-transform:none;
padding:0;
margin-bottom:0;
margin-top:2%;}
DOCUMENTO HTML
<HTML>
<HEAD>
<TITLE>Cursos de Estilos CSS</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="../cursos.css">
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="../imagens/back.gif">
<DIV CLASS="head">
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD BGCOLOR="lightyellow" VALIGN="top">
<CENTER><A HREF="http://64.111.15.93/dicas">
w w w . s e u s i t e . c o m</A></CENTER>
</TD>
</TR>
</TABLE>
<H2 ALIGN="CENTER" CLASS="logotipo">curso de Estilos CSS</H2>
<H1 ALIGN="CENTER">Título do Curso</H1>
<table border=0 width=100%>
<tr>
<td bgcolor="lightyellow" valign="top">
<H3 ALIGN="CENTER">Nome do Autor</H3>
<center><A HREF="mailto:e-mail do autor">e-mail do autor</a> </center>
</td>
</tr>
<tr>
<td>
<H4 ALIGN="CENTER" CLASS="edition"> Uma breve descrição sobre o que abordará o curso </H4>
<HR SIZE=3 NOSHADE WIDTH="30%">
</td>
</tr>
</table>
<TABLE ALIGN="center"><TR ALIGN="center">
<TD><IMG SRC="../imagens/bullet1.gif"></TD>
<TD><A HREF="descricao.html">Vínculo1</A> </TD>
<TD><IMG SRC="../imagens/bullet1.gif"></TD>
<TD><A HREF="indice.html">Vínculo2</A> </TD>
<TD><IMG SRC="../imagens/bullet1.gif"></TD>
<TD><A HREF="biblio.html">Vínculo3</A> </TD>
<TD><IMG SRC="../imagens/bullet1.gif"></TD>
<TD><A HREF="sugestao.html">Vínculo4</A> </TD>
<TD><IMG SRC="../imagens/bullet1.gif"></TD>
</TR></TABLE>
</DIV>
</BODY>
</HTML>
