Cascading Style Sheets ou Folhas de Estilo em Cascata (CSS) são um mecanismo para adicionar estilos (cores, fontes, espaçamento, etc.) a um documentos da web.
CSS pertence a três tecnologias básicas da web, juntamente com HTML e JavaScript. Com um planejamento cuidadoso, o CSS ajuda a separar as preocupações. Recursos independentes controlam a estrutura, apresentação e comportamento do conteúdo.
As folhas de estilo desempenham um papel importante na acessibilidade da Web, escalabilidade e até desempenho. Portanto, como autor de conteúdo ou web designer, eles lhe dão controle sobre como seu dispositivo renderiza seu conteúdo. Do layout ao tamanho e cor da fonte, o CSS transforma o conteúdo em belas páginas.
Como é o CSS?
CSS é uma grande linguagem – há tantas coisas diferentes para estilizar! Mas sua sintaxe é simples, basta aprender algumas regras.
Os elementos HTML têm várias propriedades CSS que podem ser estilizadas. A propriedade color define a cor do primeiro plano (por exemplo, texto). O tamanho da fonte depende da propriedade font-size.
Cada propriedade pode ser definida para um valor com suporte. Atribuir um valor a uma propriedade é uma “declaração”. Eles geralmente se parecem com isso:
property: valueExemplo:
color: redOs valores para propriedades diferentes podem parecer muito diferentes, mesmo para a mesma propriedade. Por exemplo, aqui estão duas outras maneiras de escrever a declaração anterior:
color: #ff0000
color: rgb(255, 0, 0)Como HTML e CSS se encaixam
Você pode combinar HTML e CSS de várias maneiras, cada uma com suas vantagens.
Estilos de escrita embutidos
A maneira mais fácil é anexar a declaração de estilo diretamente ao elemento no arquivo HTML. Você pode usar o atributo style para fazer isso, assim:
<body style="color: red">
<p>A maior parte deste texto é vermelho…</p>
<<body style="color: red">
<p>A maior parte deste texto é vermelho…</p>
<p style="color: blue">... mas isso não é!</p>
</body>Embora elementos de estilo inline como esse sejam convenientes, existem várias desvantagens. Para iniciantes, ele complica o HTML, tornando-o difícil de entender de relance. Também é difícil de manter: imagine um documento longo no qual queremos definir a cor de cada parágrafo. Isso é CSS, mas não uma “folha de estilo”.
Incorpore estilo no head
Você pode usar o segundo mecanismo, embedding , para começar a ver como é a folha de estilo. Usando essa abordagem, coletamos todas as declarações de estilo em elementos de estilo no cabeçalho do documento. Seria algo assim:
<!DOCTYPE html>
<html>
<head>
<style>
/* instruções de estilo aqui */
</style>
</head>
<body>
...Nossas instruções de estilo exigem mais detalhes do que antes. Quando as movemos para o cabeçalho, cada regra não estava mais associada a um elemento. Poderíamos declarar color: red, mas qual deveria ser essa cor?
É aqui que entram os seletores CSS. Eles nos permitem segmentar partes específicas da página e definir seus estilos em um só lugar, usando a seguinte sintaxe:
selector {
declaration1;
declaration2;
/* etc. */
}Por exemplo, para tornar o texto do parágrafo azul, podemos especificar o seguinte:
p {
color: blue;
}Neste exemplo, o seletor é apenas p , que corresponde a todos os elementos de parágrafo em nosso documento. Contanto que esteja em uma tag <p>, todo o texto será tingido de azul.
Vinculando folhas de estilo externas
O método de substituição final é o encadeamento. Portanto, este é de longe o método mais útil e aquele que você deve escolher na maioria das vezes. Dessa forma, em vez de incorporar regras CSS diretamente em elementos de estilo no documento, você pode mover as regras CSS para arquivos separados.
<link rel="stylesheet" href="styles.css" />Cole este código na tag Head do arquivo HTML para vincular a folha de estilo externa.
O poder do CSS
Com o método vinculado, aproveitamos um recurso central do CSS: separação de interesses. Portanto, todas as informações semânticas (o significado do conteúdo) estão contidas no documento HTML. Os estilos – como estão – estão em uma folha de estilo de arquivo separada.
Veja alguns benefícios dessa separação:
- Você pode alternar as folhas de estilo simplesmente alterando a referência do arquivo. Isso pode até acontecer dinamicamente. Em uma etapa, você pode alterar a aparência geral da página.
- Muitas páginas podem compartilhar a mesma folha de estilo conforme necessário. Ao alterar um único arquivo, você pode atualizar a aparência de todo o seu site.
- Existem vantagens técnicas em dividir uma página em “conteúdo” e “estilo”. Então, proxies e navegadores podem armazenar em cache arquivos individuais separadamente. Portanto, isso significa que os sites podem enviar suas informações de estilo uma vez, em vez de incluí-las em todas as páginas.
- Por meio da colaboração, diferentes equipes podem aproveitar seus pontos fortes, criando e editando arquivos separados sem afetar uns aos outros.
Explicando a cascata
Você já sabe muito sobre estilos e folhas de estilo, mas e a parte “cascata” do CSS?
Quando existem várias folhas de estilo, a cascata decide quais estilos usar. Você viu como os autores podem estilizar seu conteúdo. Mas outra característica do CSS é que ele também fornece aos leitores e criadores de navegadores algumas informações sobre o assunto.
Você já deve estar se perguntando sobre os estilos padrão. Por exemplo, como um elemento H1 pode parecer grande e grosso mesmo sem nenhuma folha de estilo de autor? Então, isso se deve a um conjunto especial de regras que compõem a folha de estilo do agente do usuário. Essas regras são inicialmente aplicadas pelo seu navegador da Web a todas as páginas que você visita.
Cascata especifica que as folhas de estilo do autor são aplicadas após os estilos do agente do usuário. Se nossos navegadores disserem “Os títulos estão em negrito”, mas o autor da página disser “Os títulos nesta página estão claros”, eles acabarão sendo claros.
Há outra fonte de folha de estilo que dá aos leitores algum controle. Portanto, em teoria, qualquer usuário da web pode manter as folhas de estilo do usuário com regras personalizadas. Eles estão no meio: as regras do usuário substituirão os padrões do navegador, mas serão substituídas pelos estilos de autor. Infelizmente, o suporte para folhas de estilo do usuário nunca foi difundido.
Diferentes segmentos de mídia
Além da tela, você também pode usar folhas de estilo em diferentes contextos. O atributo media do elemento link define a quais tipos de mídia a folha de estilo se aplica. Por exemplo, você pode usar marcação para definir uma folha de estilo para impressão da seguinte forma:
<link rel="stylesheet" href="print.css" media="print" />Você pode coletar estilos comuns em uma folha de estilo global e estilos específicos de mídia em arquivos separados. Portanto, existem até alguns tipos de mídia que atendem a apresentações auditivas ou em braille do seu conteúdo. CSS é uma ferramenta importante para melhorar a acessibilidade.
Então, sites como a Wikipedia usam CSS para controlar seus estilos de impressão, ocultar elementos indesejados e simplificar layouts.
CSS faz HTML parecer bom
As folhas de estilo em cascata cobrem muito: cascata, herança, seletores, fontes, mídia, etc. Mas seu poder torna possível a web moderna. É um meio que fornece recursos integrados de reutilização, flexibilidade e acessibilidade.
Então senhores, espero que tenham curtido, este artigo é introdutório para quem nunca sequer tenha ouvido falar de CSS ou esteja iniciando.
Leia também: Introdução à Context API do React
