CSS

O HTML foi criado para apenas divulgar textos universitários portanto o seu suporte a configuração visual sempre foi muito pobre. Para que seja possível criar sites profissionais foi criado junto com o XHTML o CSS (Cascading Style Sheets) que permite a configuração visual de sua página.

Com o CSS é possível configurar qualquer coisa em sua página, cor de fonte, cor de fundo, imagem de fundo, tipo de fonte, tamanho, posição e muito mais.

O CSS pode redefinir:

uma tag
uma classe
um ID

Ao redefinir uma tag você vai estar mudando o comportamento padrão desta tag em todas suas ocorrências. Classes e ID's são colocados em tags e servem para criar uma regra específica para um ou demais lugares sendo que: classe pode ser atribuído a mais de um local na mesma página, id só pode ser atribuído a um local na mesma página.

Redefinição de uma tag:

h1{ color: #0066FF; }

</style>

<h1>Título</h1>

Redefinição de uma classe:

.titulo{ color: #0066FF; }

</style>

<h1 class="titulo">Título</h1>

Redefinição de um ID:

#titulo{ color: #0066FF; }

</style>

<h1 id="titulo">Título</h1>

A definição do CSS pode ser feita em três locais diferentes: direto na tag, no cabeçalho da página ou externamente. O local mais adequado é no arquivo externo pois você cria apenas uma folha de estilo para todo o seu site. Porém você pode criar um CSS para apenas uma página (aplicado no head) ou para apenas um local (aplicado diretamente na tag).

CSS aplicado diretamente na tag:

<h1 style="color: #0066FF;">Título</h1>

CSS aplicado no head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS aplicado no HEAD</title>

h1 { color: #0066FF; }

</style>

</head>

<body>

<h1>Título</h1>

</body>

</html>

CSS externo:

h1 { color: #0066FF; }

e no arquivo HTML:

O arquivo externo é texto puro e basta conter as definições e pode ter qualquer nome e extensão mas é recomendado que ele contenha a extensão ".css".