Exemplo 1 - Interno

Neste exemplo temos um documento HTML usando estilos, definidos pela linguagem CSS. O estilo atribuido está inserido na própria página dentro do <HEAD> do documento pelo elemento <STYLE TYPE= "text/css "> e </STYLE>

DOCUMENTO HTML COM ESTILO DEFINIDO INTERNAMENTE
<HTML>
<HEAD>
<TITLE>Exemplo de página HTML usando estilos dentro do documento<TITLE>

<STYLE TYPE= "text/css ">

</STYLE>

</HEAD>

<BODY>
<P>
<H1>Web StyleSheets</H1>
<P CLASS=hide>
<P ID=p1><SPAN ID=s1>O que há de novo?</SPAN>
<P ID=p2><SPAN ID=s2>O que é stylesheets?</SPAN>
<P ID=p3><SPAN ID=s3>Documentos</SPAN>
<P ID=p5><SPAN ID=s5>CSS</SPAN>
<P ID=p6><SPAN ID=s6>>DSSSL</SPAN>
<P ID=p7><SPAN ID=s7>XSL</SPAN>

<BLOCKQUOTE>
<SPAN ID=s11> " Esperançosamente, futuras inovações Web imitarão o exemplo colocado pela Web Consortium em seus trabalhos sobre CSS "<BR> --Jakob Nielsen</SPAN>
</BLOCKQUOTE>

O que há de novo</H2>

DSSSL</H2>

<HR>

<ADDRESS>
Webmaster
</ADDRESS>

</BODY>
</HTML>

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>

Exemplo 3 - Externo

Ver Resultado

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>

Exemplo 1 - Interno

O que há de novo</H2>

DSSSL</H2><HR><ADDRESS>Webmaster</ADDRESS></BODY></HTML>

Exemplo 2 - Externo

Exemplo 3 - Externo

DSSSL</H2>

<HR>

<ADDRESS>
Webmaster
</ADDRESS>

</BODY>
</HTML>