• Folha de estilo externa (3)

<link rel="stylesheet" type="text/css" href="estilo.css">

• Folha de estilo incorporada (2)

<style rel="stylesheet" type="text/css">

body {

background: #000 url(imagens/minhaimagem.gif);

}

</style>

• Folha de estilo inline (1)

<p style="color:#000; margin: 5px;">

Aqui um parágrafo de cor preta e com 5px nas 4 margens.

</p>

• Seletor de tipo: utilizando este seletor, selecionamos todas as tags de um

mesmo tipo. Exemplo: a, p, h1

• Seletor de classe: utilizando este seletor, selecionamos os elementos com a

classe aplicada. Exemplo: .destaque seleciona todos os elementos com a

classe "destaque".

• Seletor de id: utilizando este seletor, selecionamos a tag com id especificada.

Exemplo: #cabecalho irá selecionar o elemento com a id "cabecalho".

• Seletor descendente: utilizando este seletor, podemos escolher um ou mais

elementos que estão dentro de outro. Exemplo: body div .paragrafo (body -> div

-> .paragrafo)

• Pseudo-classes são tipos de classes especiais que não são definidas pelo

desenvolvedor (já são pré-definidas). O seletor de pseudo-classe é escrito com

o nome do elemento + dois pontos + nome da pseudo-classe.

• Uso comum na tag <a>

• a:link, estilizamos links não-visitados, em seu estado normal.

• a:visited, estilizamos apenas links visitados, que já foram clicados.

• a:hover, estilizamos quando o mouse está em cima do mesmo.

• a:focus, estilizamos quando os selecionamos com o teclado, através da

tecla Tab.

• a:active, estilizamos quando o mouse está sendo clicado ou pressionamos

Enter, ativando o link.