CSS

O que é CSS e como funciona a Cascata

O CSS (Cascading Style Sheets) é uma linguagem de folhas de estilo utilizada para descrever a apresentação de documentos escritos em HTML ou XML. Ele define como elementos devem ser exibidos na tela, em papel ou em outros meios, permitindo separar o conteúdo (HTML) da forma (estilo). Isso garante maior flexibilidade, reutilização de código e manutenção mais eficiente em projetos de desenvolvimento web (W3C – CSS Overview).

A palavra “cascading” (cascata) refere-se ao modo como o navegador decide qual regra aplicar quando há múltiplas declarações que afetam o mesmo elemento. O processo de cascata segue três princípios básicos:

Origem da regra – regras podem vir do navegador (estilo padrão), do autor da página ou do próprio usuário.
Especificidade – seletores mais específicos (ex.: #id) têm prioridade sobre seletores mais genéricos (ex.: div).
Ordem de declaração – quando duas regras têm o mesmo peso e especificidade, prevalece a última definida no código.

Especificidade e Ordem na Cascata

Quando várias regras CSS disputam a aplicação sobre o mesmo elemento, o navegador usa a cascata, baseada em peso (especificidade) e ordem de declaração.

Peso da especificidade

O peso é calculado a partir do tipo de seletor usado:

Inline styles (escritos no atributo style="" do HTML) → peso mais alto.
IDs (#id) → alta especificidade.
Classes, atributos e pseudo-classes (.classe, [atributo], :hover, :nth-child) → especificidade média.
Elementos e pseudo-elementos (div, p, ::before, ::after) → baixa especificidade.
Universal (*) e herança → quase sem peso.

inline > id > classe/atributo/pseudo-classe > elemento/pseudo-elemento

Ordem de declaração

Se duas ou mais regras tiverem o mesmo peso e especificidade, prevalece a última regra lida pelo navegador, ou seja, a mais abaixo no código.

Exemplo:

p {
  color: blue;   /* primeira regra */
}

p {
  color: red;    /* mesma especificidade, mas última regra → vence */
}

Quadro de Especificidade no CSS

Nível

Tipo de seletor

Exemplo

Peso relativo

1️⃣

!important (sobrescreve tudo)

p { color: red !important; }

Máxima força (não entra no cálculo, mas vence)

2️⃣

Estilo inline (atributo style)

<p style="color: blue;">

1000

3️⃣

#titulo { color: green; }

100

4️⃣

Classe / Atributo / Pseudo-classe

.destaque {}, [type=text] {}, :hover {}

5️⃣

Elemento / Pseudo-elemento

p {}, div {}, ::before {}

6️⃣

Universal / Herança

* {}, body { font: ... } herdado

7️⃣

Ordem no código (última regra vence se houver empate)

—

Desempate

O link explora os fundamentos da arquitetura do Google Chrome, começando pela função essencial da CPU e da GPU até os conceitos de processo e thread, explicando como o navegador utiliza uma arquitetura multiprocessada: um processo principal (“browser”) coordena outros — incluindo renderizadores para cada guia (ou site), processos de GPU, plug-ins, extensões e utilitários — comunicando-se via IPC e oferecendo maior estabilidade, segurança (sandboxing) e resiliência — além de introduzir o modelo de “servicificação” e o isolamento por site (site isolation), que atribui processos separados a iframes de diferentes origens para fortalecer a segurança

Figura ilustrativa da árvore de execução do html

fonte https://developer.chrome.com/blog/inside-browser-part3?hl=pt-br

Estrutura básica do html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>
<body>
 
</body>
</html>

<!DOCTYPE html>

Define o tipo de documento. Aqui, indica que o arquivo é um documento HTML5. Isso ajuda o navegador a renderizar a página de forma correta e padronizada.

<html lang="en">

A tag <html> envolve todo o conteúdo da página.

O atributo lang="en" indica o idioma principal do documento (aqui, inglês). Isso é útil para acessibilidade e SEO.

<head>

A seção <head> contém metadados da página, ou seja, informações que não aparecem diretamente para o usuário, mas são fundamentais para o funcionamento do site. Dentro dela temos:

```
<meta charset="UTF-8">
```
Define o conjunto de caracteres usado (UTF-8). Isso permite representar corretamente letras acentuadas e símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

O viewport em HTML refere-se à área visível de uma página da web dentro do navegador. Em dispositivos móveis, esse espaço tende a ser menor do que em telas de desktop, e sem configuração adequada, o conteúdo pode aparecer “espremido” ou exigir zoom manual. Para controlar como o site se adapta a diferentes tamanhos de tela, utiliza-se a meta tag viewport, que orienta o navegador sobre como deve interpretar as dimensões e a escala da página.

O parâmetro width=device-width instrui o navegador a ajustar a largura da página à largura real da tela do dispositivo. Isso evita que o conteúdo seja exibido em escala reduzida (com o usuário tendo que ampliar para ler). Sem esse parâmetro, muitos navegadores móveis assumem uma largura padrão (geralmente em torno de 980px), o que causa má visualização.

Já o parâmetro initial-scale=1.0 define o nível inicial de zoom quando a página é carregada. O valor 1.0 significa que a página será exibida em sua escala natural, sem aproximação nem afastamento. Valores maiores (ex.: initial-scale=2.0) ampliam o conteúdo, enquanto menores (ex.: initial-scale=0.5) reduzem.

Além desses, existem outros parâmetros opcionais que refinam o comportamento da viewport:

maximum-scale: define o nível máximo de zoom permitido pelo usuário.
minimum-scale: define o nível mínimo de zoom permitido.
user-scalable: controla se o usuário pode ou não dar zoom manualmente (yes ou no).
```
<title>Document</title>
```
Define o título da página, exibido na aba do navegador.
```
<link rel="stylesheet" href="exemplo01.css">
```
Faz a ligação com uma folha de estilo CSS externa, chamada exemplo01.css. É aqui que os estilos (cores, tamanhos, layouts) serão aplicados ao HTML.

<body>
</body>

A seção <body> contém todo o conteúdo visível ao usuário: textos, imagens, links, botões, tabelas, formulários etc.

</html>

Fecha a estrutura do documento HTML.

Para entender melhor

Conflito simples

HTML:

<p id="mensagem" class="alerta">Bem-vindo ao curso!</p>

CSS:

p { color: blue; }                /* Peso 1 */
.alerta { color: green; }         /* Peso 10 */
#mensagem { color: red; }         /* Peso 100 */

Ordem de declaração

HTML:

<p class="info">Atenção!</p>

CSS:

.info { color: blue; }            /* Peso 10 */
.info { color: green; }           /* Peso 10, mas última declaração */

Uso do `!important`

HTML:

<p class="destaque">Texto em destaque</p>

CSS:

.destaque { color: blue; }                      /* Peso 10 */
p.destaque { color: red !important; }           /* Peso 11, mas com !important */

Inline vs Classe

HTML:

<p class="aviso" style="color: purple;">Mensagem de aviso</p>

CSS:

.aviso { color: green; }          /* Peso 10 */

Seletor combinado

HTML:

<p id="principal" class="noticia">Últimas notícias</p>

CSS:

p { color: blue; }                         /* Peso 1 */
.noticia { color: green; }                  /* Peso 10 */
#principal.noticia { color: orange; }       /* Peso 110 */

NextSeletores

Last updated 16 hours ago

O que é CSS e como funciona a Cascata

Especificidade e Ordem na Cascata

Peso da especificidade

Ordem de declaração

Quadro de Especificidade no CSS

Estrutura básica do html

Para entender melhor

Conflito simples

Ordem de declaração

Uso do !important

Inline vs Classe

Seletor combinado

Uso do `!important`