Como inserir CSS em Html

Aqui ficam 3 métodos que podemos usar para inserir estilos CSS em uma página.

MÉTODO 1: ARQUIVO EXTERNO CSS

Este é o método que apresenta maior versatilidade. Um arquivo externo CSS pode ser ligado a quantas páginas desejarmos, desta forma deixando a manutenção de um site muito mais fácil (um arquivo CSS controla o visual do site inteiro). Para este método, utilizamos o elemento link, da seguinte forma:

<link href="css/arquivo.css" rel="stylesheet">

Esse método é o que tem menor precedência em relação aos outros. Ou seja, estilos aplicados utilizando os outros métodos abaixo terão preferência de aplicação em caso de um conflito (estilos aplicados a um mesmo elemento).

MÉTODO 2: TAG STYLE

Com este método, aplicamos estilos apenas na página onde as regras CSS estão inseridas. Para isso, utiliza-se a tag style dentro da tag head. Exemplo:

<style>

    p {

        color: red;

    }

</style>

No exemplo acima, os estilos definifos aplicarão a cor vermelha para todos os parágrafos do documento HTML em questão. Todos os elementos style devem ficar dentro do elemento head de uma página.

Os estilos em uma tag style tem precedência sobre os estilos em um arquivo externo.

MÉTODO 3: ATRIBUTO STYLE

Esse é o método que deve ser menos utilizado, por ir contra a divisão de um página em 3 camadas, como vimos anteriormente. Utilizando o atributo style, podemos aplicar estilos a um elemento específico. Exemplo:

<p style="color: red;">Texto</p>

No exemplo acima, aplicamos a cor vermelha apenas para o parágrafo em questão (existem maneiras melhores de se selecionar apenas um elemento ou grupo de elementos para aplicação de estilos). Esse método é chamado de “inline styles” (ou estilos em linha) por estarem localizados junto com o código HTML. Ele tem precedência de aplicação sobre todos os outros.