Capítulo 6 - Exemplos de Desenhos " Stylesheet "

Exemplo 2 - Externo

Ver Resultado

Neste exemplo baseado em " stylesheet " externo, são inseridos vários estilos num só documento HTML

DOCUMENTOS CSS

titulo.css

DIV.titulo { width: 100%; }

DIV.titulo H1 { font-size: 2em;
background: darkblue;
font-family: Garamond;
color: white;
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto; }

corpo.css

A:link { color: #900 }
A:visited, A:active { color: #009 }

DIV.corpo {
margin-left: 0.2em;
margin-right: 0.2em; }
padding-left: 0.0em;
padding-right: 0.0em; }

DIV.corpo H2 {
font-family: " Arial Black ",Arial,sans-serif;
padding-top: 0.2em;
padding-bottom: 0.2em;
color: white;
text-align: left;
background: red;

DIV.corpo P {
padding-top: 0em;
padding-bottom: 0em;
margin-bottom: 0em;
margin-top: 0.2em; }
text-align: justify;

DIV.corpo H1 {
display: block;
text-align: right;
color: #dddddd;
font-size: 80pt;
font-family: Arial,helvetica,sans-serif; }

DOCUMENTO HTML

<HTML>
<HEAD>
<TITLE>Exemplo de página HTML usando vários estilos externos<TITLE>

<LINK REL= "stylesheet " TYPE= "text/css " HREF= "./titulo.css ">
<LINK REL= "stylesheet " TYPE= "text/css " HREF= "./corpo.css ">

</HEAD>
<BODY BGCOLOR= "ffffff ">

<DIV ALIGN= "center " CLASS= "titulo ">
<H1 ALIGN= "center ">Exemplo de " Stylesheet " Externo</H1>
</DIV>

<DIV ALIGN= "center " CLASS= "corpo ">

Estilos CSS</H2>

<P>
Neste exemplo baseado em " stylesheet " externo, são inseridos vários estilos num só documento HTML. Esta é uma das vantagens de se usar CSS nas páginas HTML. Além do documento apresentar dois ou mais estilos diferentes para um mesmo elemento, torna-se mais simples descrevê-lo, e ainda poderá usar os estilos em outras páginas, juntos ou em separados.
</P>

<CENTER><A HREf= "javascript:history.go(-1) ">Volta para o Curso</a> </CENTER>

</DIV>
</BODY>
</HTML>

Capítulo 6 - Exemplos de Desenhos " Stylesheet "

Exemplo 2 - Externo

VOLTAR