O que é CSS

docs.scrimba.com

Abra qualquer site bem feito, remova seu CSS, e você fica com uma longa coluna de texto preto em fundo branco: todo cabeçalho, todo parágrafo, todo link, empilhados em ordem e completamente sem estilo. Essa coluna simples é seu HTML. Tudo o que torna a página com aparência de design, as cores, o espaçamento, as fontes, as colunas e cartões e barras de navegação, é CSS. Este capítulo é sobre o que essa segunda linguagem é e como ela funciona junto à primeira.

Uma página antes e depois do CSS

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). A parte importante é style (estilo): CSS é como você descreve a aparência de uma página. Seu HTML diz "isto é um cabeçalho, isto é um parágrafo, isto é um botão". CSS então diz "faça o cabeçalho grande e azul escuro, dê ao botão algum preenchimento e uma borda arredondada".

Pense no HTML como o conteúdo de uma sala, os móveis e onde estão, e CSS como a pintura, a iluminação e a organização. Mesma sala, mas uma está vazia e outra é um lugar onde você gostaria de estar. Você escreve CSS em regras separadas que apontam para partes do seu HTML e mudam como elas parecem.

CSS é a camada de apresentação de uma página web. HTML fornece estrutura e significado; CSS lê essa estrutura e descreve como ela deve ser renderizada: cor, tipografia, espaçamento, tamanho e layout. Os dois foram projetados para serem escritos separadamente, para que o mesmo HTML possa ser completamente resestilizado trocando o CSS, e uma única folha de estilos pode estilizar mil páginas de uma vez.

Essa separação é o objetivo. Quando seu conteúdo vive em HTML e sua apresentação vive em CSS, você pode redesenhar um site sem tocar sua marcação, e pode mudar uma folha de estilos compartilhada em vez de editar cada página. Manter os dois apartados é um hábito que vale a pena construir desde sua primeira regra.

CSS é a camada de apresentação, e o navegador a aplica como um estágio distinto de renderização: analisa seu HTML no DOM (o Document Object Model, a árvore de elementos viva que o navegador constrói a partir de sua marcação), analisa seu CSS em um conjunto de regras, depois compara regras com elementos para calcular um estilo final para cada um. Seu CSS nunca muda a árvore do DOM; ele a decora.

Esse modelo em estágios é por que a separação de responsabilidades se mantém na prática, não apenas em princípio. Uma página cujo significado vive inteiramente em seu HTML se degrada graciosamente: se o CSS falhar ao carregar, o conteúdo ainda está lá e ainda ordenado, porque estrutura e apresentação nunca foram entrelaçadas. É também por que a mesma marcação pode ter um tema claro e um tema escuro, ou um layout de impressão e um layout de tela, sem nenhuma mudança no HTML. Apresentação é uma camada que você anexa, não uma propriedade incorporada ao conteúdo.

h1 {
  color: navy;
  font-size: 2rem;
}

Essa é uma única regra de CSS. Ela encontra cada cabeçalho <h1> na página e o torna azul marinho e maior. O HTML permanece exatamente como estava; apenas sua aparência muda.

JunoUma página antes e depois do CSS HTML é o conteúdo, CSS é a aparência. Você escreve regras que apontam para partes de sua página e mudam como elas aparecem, como fazer um cabeçalho grande e azul. A página subjacente não muda, apenas a forma como é mostrada. Essa separação é a ideia toda.

JunoUma página antes e depois do CSS CSS é apresentação, HTML é estrutura, e eles são mantidos separados propositalmente. Resestilize o CSS e a mesma marcação fica completamente diferente; compartilhe uma folha de estilos e ela estiliza cada página. Construa o hábito de manter conteúdo e aparência separados desde sua primeira regra.

JunoUma página antes e depois do CSS O navegador analisa HTML no DOM, analisa CSS em regras, depois calcula um estilo para cada elemento: seu CSS decora a árvore, nunca a reescreve. Esse modelo em estágios é por que uma página com seu significado no HTML ainda funciona quando o CSS falha ao carregar. Apresentação é uma camada que você anexa, não algo incorporado ao conteúdo.

Como CSS aponta para seu HTML

CSS só se torna útil quando pode encontrar as partes certas de sua página. Ele faz isso com um seletor: a parte no início de uma regra que nomeia o que estilizar. Na regra acima, h1 é o seletor, e significa "todo cabeçalho h1".

Você geralmente alvo elementos dando a eles uma class em seu HTML e apontando para essa classe do CSS. Uma classe é um rótulo que você escolhe:

<button class="buy-button">Comprar agora</button>

.buy-button {
  background-color: teal;
  color: white;
}

O seletor .buy-button encontra o elemento com essa classe e o estiliza. Você encontrará muitos tipos de seletor depois; classes são os que você mais usará.

Uma regra de CSS tem duas partes: um seletor que diz quais elementos combinar, e um bloco de declarações que diz como estilizá-los. Seletores são como CSS alcança o DOM e escolhe elementos para aplicar estilos. Você pode selecionar por tipo de elemento (h1), por classe (.buy-button), por id, por relacionamento, e mais.

<button class="buy-button">Comprar agora</button>

.buy-button {
  background-color: teal;
  color: white;
}

Na prática você estiliza com classes muito mais do que com tipos de elemento ou ids, porque uma classe é reutilizável e não carrega bagagem de especificidade incorporada. O capítulo seletores cobre a gama completa e quando cada um é a ferramenta certa.

Seletores são a linguagem de consulta do CSS: cada um é um padrão que o navegador testa cada elemento para decidir quais regras se aplicam. Essa correspondência não é gratuita, e ela interage com especificidade (o peso que o navegador atribui a um seletor para quebrar empates quando várias regras definem a mesma propriedade no mesmo elemento). Uma classe pesa mais do que um tipo de elemento; um id pesa mais do que uma classe; estilos inline pesam ainda mais.

.buy-button {
  background-color: teal;
  color: white;
}

A consequência prática é que como você seleciona é uma decisão de design, não apenas uma de direcionamento. Selecionar tudo com ids e seletores profundamente aninhados acumula especificidade que regras posteriores dificilmente conseguem sobrescrever, que é como as folhas de estilos se calcificam. Seletores simples baseados em classe mantêm a especificidade baixa e previsível, que é por que quase toda abordagem CSS escalável é construída em classes. O capítulo seletores desmancha a especificidade adequadamente.

JunoComo CSS aponta para seu HTML Um seletor é a parte de uma regra que diz o que estilizar. O mais amigável para começar é uma classe: você coloca class="nome" em um elemento em seu HTML, depois estiliza .nome em seu CSS. Não se preocupe com os outros tipos ainda, classes o levarão longe.

JunoComo CSS aponta para seu HTML Cada regra começa com um seletor que combina elementos no DOM, e você pode combinar por tipo, classe, id, ou relacionamento. Recorra a classes por padrão: elas são reutilizáveis e mantêm a especificidade gerenciável. O capítulo de seletores tem o kit completo.

JunoComo CSS aponta para seu HTML Seletores são uma linguagem de consulta, e cada um carrega um peso de especificidade que decide quem vence quando regras colidem: id sobre classe, classe sobre tipo, inline sobre tudo. Como você seleciona é uma decisão de manutenibilidade, então mantenha-a simples e baseada em classe para evitar que a especificidade calcifique sua folha de estilos. A especificidade recebe o tratamento completo no capítulo de seletores.

O que "cascata" significa

A primeira palavra em Cascading Style Sheets é a que as pessoas pulam, mas explica muito. Mais de uma regra pode se aplicar ao mesmo elemento, e elas podem discordar. Talvez uma regra diga que parágrafos são cinza e outra diga que este parágrafo em particular é preto. A cascata é o conjunto de regras que o navegador usa para decidir qual vence.

Na maioria das vezes se resume a uma coisa: se duas regras são igualmente específicas, a escrita depois vence. Você não precisa da imagem completa ainda. Saiba que quando um estilo não aparece da forma que você espera, geralmente é porque outra regra o venceu, não porque CSS está quebrado.

A cascata é o algoritmo que resolve conflitos quando várias regras direcionam o mesmo elemento e definem a mesma propriedade. Ela pesa algumas coisas em ordem: de onde a regra veio, o quão específico é seu seletor, e, como um desempate final, ordem de fonte (o mais recente vence). Quando duas regras são igualmente específicas, a última declarada vence.

Este é o mecanismo por trás de a maioria dos momentos "por que meu CSS não está funcionando". O estilo é aplicado; está sendo sobrescrito por uma regra que se classifica mais alto. Ler a cascata corretamente, em vez de acumular mais regras para forçar uma mudança, é um dos hábitos que separa lutar com CSS de dirigi-lo. O capítulo como CSS funciona caminha pela ordem completa de resolução.

A cascata é o algoritmo de resolução de conflitos do CSS, e conhecer sua ordem transforma a maioria dos bugs de estilo de mistérios em pesquisas. Ela resolve declarações concorrentes por, em ordem: origem e importância (estilos do autor versus padrões do navegador versus !important), depois especificidade (o peso do seletor), depois ordem de fonte (a regra posterior vence o desempate final).

A razão disso importar em escala de produção é que cada sobrescrita que você escreve é um movimento nessa classificação. Recorrer a !important ou um id para vencer um conflito eleva a barra para cada regra futura que precisa tocar o mesmo elemento, e essas escalações se compõem em uma folha de estilos que ninguém pode mudar com segurança. A correção durável é quase sempre baixar a especificidade em outro lugar, não elevá-la aqui. CSS moderno adiciona ferramentas que lhe dão controle de cascata sem a corrida de especificidade, como camadas de cascata, que o capítulo organizando e escalando CSS cobre. Para a ordem completa de resolução, veja como CSS funciona.

JunoO que cascata significa Cascata significa que mais de uma regra pode atingir o mesmo elemento, e a cascata decide qual vence. A versão cotidiana: quando duas regras são igualmente específicas, a mais recente vence. Então se um estilo não está aparecendo, outra regra provavelmente o venceu. Levei um tempo para parar de achar isso misterioso.

JunoO que cascata significa A cascata resolve conflitos por origem, depois especificidade, depois ordem de fonte, com a regra mais recente vencendo um desempate igual. A maioria dos momentos "meu CSS não está funcionando" é uma sobrescrita, não um bug. Aprenda a ler por que uma regra perdeu em vez de empilhar mais regras para forçá-la, e CSS para de parecer uma luta.

JunoO que cascata significa Conflitos são resolvidos por origem e importância, depois especificidade, depois ordem de fonte. Cada sobrescrita que você escreve é um movimento nessa classificação, então vencer com !important ou um id eleva a barra para cada regra depois dela. A correção durável é baixar a especificidade em outro lugar, não elevá-la aqui. Camadas de cascata lhe dão controle sem a corrida armamentista.

Para onde CSS vai daqui

CSS é uma linguagem pequena em seu núcleo, um seletor e alguns pares de propriedade-valor, mas alcança muito longe. Uma vez que você pode direcionar elementos e definir propriedades, o resto deste manual é sobre as propriedades que valem a pena conhecer e os sistemas construídos sobre elas: o box model que controla espaçamento e tamanho, depois cor e tipo, e depois as ferramentas de layout, flexbox e grid, que organizam uma página inteira.

O próximo capítulo, como CSS funciona, fica concreto sobre a mecânica que este introduziu: as três formas de anexar CSS a uma página, a anatomia exata de uma regra, e como a cascata e herança decidem como cada elemento finalmente se parece.