Como construir uma folha de estilos CSS interna

O que são folhas de estilo interno

Folhas de estilo internas são estilos colocados no documento HTML. Esses estilos afetam apenas o documento em que estão e não podem ser referenciados por nenhum outro documento da Web.

Vantagens das Folhas de Estilo Interno

Folhas de estilo internas afetam apenas a página em que estão.
- Se você estiver trabalhando em um site grande e precisar testar estilos antes de carregá-los no site como um todo, as folhas de estilo internas podem ser uma ótima ferramenta. Eles permitem que você teste os estilos no contexto de todo o site sem quebrar nenhuma página, exceto a que você está testando.
Folhas de estilo internas podem usar classes e IDs.
- Ao contrário dos estilos inline, as folhas de estilo internas ainda podem aproveitar as classes, IDs, irmãos e outros relacionamentos de elementos.
As folhas de estilo internas não exigem o upload de vários arquivos.
- Isso é especialmente útil quando você está trabalhando com coisas como e-mail ou quiosques em que você tem apenas um arquivo HTML disponível para edição. Costumo usar estilos in-line quando não tenho certeza de qual URL seria uma folha de estilo carregada em um CMS. Manter os estilos com o documento significa que eu sei quais estilos afetam esse documento.
Estilos internos podem ter precedência mais alta que folhas de estilo externas.
- Isso é determinado pela ordem em que as folhas de estilo externas são carregadas. O desenvolvedor da Web da página tem controle sobre onde os estilos internos serão colocados na cabeça do documento. Se eles forem colocados após o link para estilos externos, eles terão uma maior precedência na cascata e sobrepõem a folha de estilo externa.

Desvantagens das Folhas de Estilo Interno

Eles afetam apenas a página em que estão.
- Se você quiser usar os mesmos estilos em vários documentos, precisará repeti-los para cada página (ou vincular a uma folha de estilos externa).
As folhas de estilo internas aumentam os tempos de carregamento da página.
- Cada página que possui uma folha de estilo interna deve carregar e analisar as informações da folha de estilo toda vez que a página for carregada. Folhas de estilo externas são armazenadas em cache pelos navegadores - o que melhora o tempo de carregamento de todas as páginas depois que o primeiro é carregado.