Esta página demonstra a utilização das 3 formas de inserir CSS em uma página:
link
, podemos ligar um arquivo CSS externo com a nossa página. Este é o método mais recomendado,
pois como podemos ligar uma folha de estilos a diversos arquivos, a manutenção do site fica muito mais fácil (apenas um arquivo CSS pode ser usado para um site inteiro).
style
, você poderá aplicar estilos que valem para a página onde o elemento está inserido.
Os estilos em uma tag style
tem precedência sobre os estilos em um arquivo externo (isto faz parte da cascata do CSS, o que veremos ao longo do tempo).
Todos os elementos style
devem ficar dentro do elemento head
de uma página.
style
em elementos como parágrafos, itens de lista, e muitos outros.
Este método é chamado de "inline styles" (ou estilos em linha) por serem localizados junto com o código HTML. Este tipo de CSS tem precedência sobre os outros.
Porém, seu uso não é recomendado, pois mistura o código CSS com o HTML (lembre da separação em 3 camadas) e dificulta a manutenção do site. Portanto, o seu uso deve ser feito
com cuidado e geralmente não é necessário.
Perceba também a utilização da tag ol
(ordered list, ou lista ordenada) para enumerar a lista acima. Semelhante a ul
, também utilizamos li
para os itens da lista.
Nesta página também mostro um exemplo básico da cascata do CSS. O arquivo externo, que tem mais abrangência, define a cor do texto como laranja.
Os estilos que estão no elemento style
(dentro de head
) definem os parágrafos como sendo azuis. Como estes estilos estão dentro do documento, eles tem precedência sobre os do arquivo externo.
Por fim, o atributo style
no último item da lista define a cor como sendo cinza. Como o atributo style
define estilos em linha, os seus estilos tem precedência sobre todos os outros.