Inserindo o CSS

Podemos inserir um arquivo CSS no código HTML de 3 formas, são elas:
1 – Folha de estilo externa;
2 – Folha de estilo interna;
3 – Estilo inline (em linha);
Folha de estilo externa
Folha de estilo externa é a melhor maneira de inserir estilo em uma página da Web.
Cria-se um arquivo .css, separado do codigo HTML e apenas “chamamos” ele dentro do nosso codigo.
A principal vantagem de se fazer assim é que alterando somente o arquivo .css,ele mudará todas as paginas em que for usado.
Vale tambem ressaltar que uma referência a um arquivo CSS externo é colocada na seção <head> da página:
Você pode inserir o arquivo css na página da web, conforme mostrado abaixo:
<head>
<link rel = "stylesheet" type = "text / css" href = "demo.css">
</head>
Logo após, defina as regras de estilo a serem usadas como no exemplo abaixo:
p{color:red;}
Vantagens de CSS Externo:
- Página HTML fica menor e estrutura mais limpa.
- A página carrega mais rápido.
- O mesmo arquivo .css pode ser usado em várias páginas.
Desvantagens de CSS Externo:
- Até que o CSS externo seja carregado, a página pode não ser processada corretamente.
Folhas de estilo interno
A folha de estilo interna é usada em um único documento. Você define estilos internos na seção principal de uma página HTML, dentro da tag <style>.
Vejamos no trecho a baixo:
<head>
<style>
p{color:blue;border:1px solid red;}
</style>
</head>
A tag <style> é aberta e fechada dentro do codigo e já são escolhidas as regras de estilo no mesmo momento, sabendo que essas regras só serão aproveitadas dentro do codigo em que estão sendo usadas.
Vantagens de CSS Interno:
- Apenas uma página é afetada pela página de estilos.
- Classes e IDs podem ser usados por stylesheet interno.
- Não é necessário carregar vários arquivos. O código HTML e o CSS podem estar no mesmo arquivo.
Desvantagens de CSS Interno:
- Aumento do tempo de carregamento da página.
- Ela afeta apenas uma página – não é útil se você quiser usar o mesmo CSS em vários documentos.
Folha de estilo Inline
Inline Style Sheet é definida no início de qualquer elemento apenas adicionando o atributo style.
<p style = "color:blue;border:1px red solid;"> Este é o exemplo do estilo em linha. </p>
É simplesmente adicionado o atributo “style” ao inicio do elemento da tag, com isso você está dizendo que somente essa tag usará esse estilo, será seu “estilo particular”.
Usar CSS desta forma não é recomendado, pois cada tag HTML precisa ser denominada individualmente.
Vantagens do CSS Inline:
- Útil para quem quer testar e visualizar alterações.
- Ótimo para correções rápidas.
Desvantagens do CSS Inline:
- CSS Inline deve ser aplicado a cada elemento especificadamente.