CSS (Cascading Style Sheets)
Sintaxe:
elemento {atributo1:valor; atributo2:valor;...}
Onde:
elemento: elemento do design ao qual o estilo será aplicado;
atributo: aspecto específico do elemento;
valor: configurações aplicadas ao atributo;
Exemplo:
h1 {font-size : 36pt;}
h2 {font-size : 24pt; color : red;}
Você pode definir regras de CSS em 3 lugares:
1) Documento fora do documento HTML. (Estilo Externo);
2) No cabeçalho do documento. (Estilo incorporado);
3) Dentro de uma tag HTML. (Estilo Inline).
Estilo Externo
Cria um arquivo externo, com extensão .css, contendo as regras do CSS. Esse método é muito utilizado em sites com muitas páginas. Exemplo do arquivo:
estilo.css
h1 {color:#003366; font-size:36px; font-family:Georgia, "Times New Roman", Times, serif;}
p {color:#FF0000; font-family:"Courier New", Courier, monospace; margin-left:0.5in;}Para referência o arquivo na sua página , no cabeçalho entre as tags <head></head>:
<link rel="STYLESHEET" href="estilo.css" type="text/css">
Estilos Incorporados
Se quiser que o estilo seja aplicado somente numa página específica, é sócolocar as regras do CSS no cabeçalho da página entre as tags "<HEAD></HEAD>", com as seguintes tags "<style type="text/css"><!-- ... --></style>". As tags "<!--" e "-->" são para browsers antigos que não interpretam o CSS, com isso eles não tenta interpretar as regras.
Exemplo:
<style type="text/css">
<!--
h1 {color:#FF0000; font-size:36px; font-family:Georgia, "Times New Roman", Times, serif;}
p {color:#00CC00; font-family:"Courier New", Courier, monospace; margin-left:0.5in;}
-->
</style>
Estilos Inline
As regras de CSS podem ser adicionadas na própria tag. Exemplo "<tag style="regra CSS">".
Exemplo:
<h1 style="color:#0033CC; background:#FFFF00";>Titulo com regra de CSS na tag </h1>
<p style="color:#0000FF">Ja nesse paragrafo foi adicionado configuracoes listadas na propria tag.</p>
Classes
Você pode adicionar estilos diferentes a um único elemento através de classes.
Exemplo:
h1.class1 {atributo:valor}
h1.class2 {atributo:valor}
Atribuição no código:
<h1 class="class1">texto</h1>
<h1 class="class2">texto</h1>
Quando você quiser também poderá criar uma classe com mais de um elemento, todos recebem as regras.
Exemplo:
.class3 {atributo:valor}
Atribuição no código:
<h1 class="class3">texto</h1>
<p class="class3">texto</p>
ID
Criando um identificação para a TAG você poderá diferencia-lá das outras TAGs semelhantes, com o id você cria estilos específicos para o elemento, e a identificação deve ser unica no documento não poderá haver elementos com a mesma identificação.
Exemplo:
#id {atributo : valor}
Atribuição no código:
<style type="text/css">
<!--
#id1 {color:#FF0000; font-size:36px; font-family:Georgia, "Times New Roman", Times, serif;}
-->
</style>....
<h1 id="id1">Titulo com ID</h1>