[APRENDENDO HTML E CSS ~ Tutorial #2] Inserindo CSS na página.

Olá Convidado, tudo bom?
No tópico anterior, aprendemos como criar uma página em HTML básico, se você não viu o tópico ainda e quer ver, basta CLICAR AQUI que você será levado até o tópico.
Hoje nós iremos detalhar os três métodos que podemos usar para inserir estilos CSS em uma página.

MÉTODO 1: ARQUIVO EXTERNO CSS
Esse é 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 esse método, nós utilizaremos o elemento link, um dos mais utilizados, na seguinte forma:

Código:

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

A tag link é uma tag vazia, assim como br e meta. O atributo href indica o endereço do arquivo CSS, nesse exemplo um arquivo chamado “arquivo.css” dentro de uma pasta “css”. O atributo rel determina a relação deste “link” com a página, aqui sendo stylesheet ou folha de estilos.

MÉTODO 2: TAG STYLE
Com esse 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:

Código:

<style>
    p {
        color: red;
    }
</style>

No exemplo acima, o estilos definidos 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.

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

Código:

<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”.

Até o próximo tópico ensinando mais sobre HTML e CSS
Clique aqui para ir ao próximo tutorial ~ (ainda não foi publicado).