FOLHAS DE ESTILO - CSS

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a
apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu
principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Deve-se incluir na declaração de estilos global a uma página, ou seja, entre as etiquetas <style
type="text/css"> e </style>, que se colocam no cabeçalho do documento.

É importante assinalar que a sentença de importação do arquivo CSS deve ser escrita na primeira linha
da declaração de estilos, algo parecido ao código seguinte.

1ª forma – Dentro do mesmo arquivo

<style type="text/css">
body{
background-color:#ffffcc;
}
</style>

Exemplo:

2ª forma – Arquivo externo

<link rel="stylesheel" type="text/css" href="folha.css">

Exemplo:
CLASSES

Definir estilos utilizando classes

As classes nos servem para criar definições de estilos que podem ser utilizadas repetidas vezes.

Uma classe pode ser definida entre as etiquetas <STYLE> (no cabeçalho do documento), ou em um
arquivo externo à página. Para definí-las utilizamos a seguinte sintaxe, um ponto seguido do nome da
classe e entre chaves os atributos de estilos desejados. Desta maneira:

.nomedaclasse {atributo: valor;atributo2:valor2; ...}

Uma vez tendo uma classe, podemos utilizá-la em qualquer etiqueta HTML. Para isso utilizaremos o
atributo class, colocando como valor o nome da classe, desta forma:

<ETIQUETA class="nomedaclasse">

Exemplo da utilização de classes

Estilo nos links

Uma técnica muito habitual, que se pode realizar utilizando as folhas de estilo em cascada e não se
podia em HTML, é a definição de estilos nos links, tirando os sublinhados ou fazer links na mesma
página com distintas cores.

Para aplicar estilo aos links devemos defini-los para os distintos tipos de links que existem (visitados,
ativos...). Utilizaremos a seguinte sintaxe, na declaração de estilos global da página (<STYLE>) ou do
site (Definição em arquivo externo):

Links normais
A:link {atributos}

Links visitados
A:visited {atributos}

Links ativos (Os links estão ativos no preciso momento em que se clica sobre eles)
A:active {atributos}

Links hover (Quando o mouse está em cima deles, funciona somente em explorer)
A:hover {atributos}

O atributo para definir links sem sublinhado étext-decoration:none, e para dar cor é color:sua cor.

Também podemos definir o estilo de cada link na própria etiqueta <A>, com o atributo style. Desta
maneira podemos fazer com que determinados links da página seja vistas de forma distinta.

Exemplo de estilos nos links