Home
ìndice Html
ìndice CSS

Folhas de Estilo

Como usar uma folha de estilo externa.

As folhas de estilo podem ser escritas de três formas diferentes.

<p style= "color: green;"> Parágrafo com Identificador<p>

Parágrafo com Identificador

<p class= "destaque detalhe"> estilo in line, direto no elemento.

Esta forma dificulta e tira do css um dos maiores poderes que ele tem. Que é o controle centralizado da apresentação.

No cabeçalho. Entre head e head, veja o exemplo:

<head>
<style type= "text/css">
h1, p {
color: #0000FF;
background-color: #3366FF;
}
p {
color: #C8C8C8;
}
h1 {
fonte-family: Comics Sans MS;
}
h2 {
color: #FF00FF;
}
</styyle>
</head>

Obs: A vantagem desta forma é que dá para localizar com mais facilidade as folhas de estilo. Em um documento html extenso, com muitas linhas, quando o estilo é aplicado direto na tag, fica difícil achar o css para modificá-lo. Existe desvantagem também, ao se aplicar este estilo dentro de um documento. Em um site com centenas de páginas, precisaríamos fazer essas alterações em cada uma das páginas. Nesse caso usaríamos a terceira forma.

Como usar uma folha de estilo externa: O exemplo a seguir é desta página:
Cria-se um novo documento salvando com a extensão .css

 
/*Documento CSS style_folha_estilo.css*/
body  {    
margin: 0;     
padding: 0;    
background-attachment:fixed; 
background-image:url(/static/img/textura-flickr-marron-paint2.png);
/*background-repeat: no-repeat;
background-position: 5px;*/
}   

#container{ /*Obs: a cerquilha deve estar colada a palavra container. Do contrário não funciona*/
width: 660px; /*largura da div, onde os elementos estão inseridos*/
/*height: 600px; /*tirar a altura por causa do texto, se o texto for pequeno dá para deixar*/
border:1px dotted black;
margin: 0 auto;/*centraliza a página*/
background-color: beige;	  
padding:30px;/*afasta o texto da margem superior da div e não do browser*/	 
font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
font-size: 16px;/*aumenta a fonte do texto dentro da div -tamanho em pixels*/ 
}

p{
text-align:justify;
}

h1{
color: #B00000;
text-align: center;
}
h3{
 text-align: center;
}
li{
color: orange;
font-size: 18px;/* aumenta a fonte do cabeçalho -tamanho em pixels*/
}

O atributo type é obrigatório, para validar o documento, nos validadores da w3c.
Validador