Aula 2 — O que é CSS e como ele funciona

Agora que você já sabe por que o CSS foi criado, chegou a hora de entender o que ele é de verdade e como o navegador usa CSS para transformar HTML em visual.

Essa aula cria o modelo mental que vai te acompanhar pelo curso inteiro.

O que é CSS?

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata).

Na prática, CSS é a linguagem usada para definir:

• Cores
• Fontes
• Tamanhos
• Espaçamentos
• Layout

Enquanto o HTML descreve o que é o conteúdo, o CSS descreve como esse conteúdo deve aparecer.

CSS não cria conteúdo

Um ponto muito importante:

Se algo não existe no HTML, o CSS não consegue “inventar”. Por isso, HTML bem estruturado é sempre o primeiro passo.

Como o CSS funciona?

O CSS funciona através de regras de estilo. Cada regra diz ao navegador:

• Quem será estilizado
• O quê será alterado
• Como será exibido

Uma regra CSS tem três partes fundamentais.

A estrutura de uma regra CSS

 p { color: blue; } 

Vamos entender cada parte:

• Seletor → indica qual elemento será estilizado (p)
• Propriedade → o que será alterado (color)
• Valor → como será alterado (blue)

O navegador como intérprete de CSS

Assim como acontece com o HTML, o navegador:

• Lê o CSS
• Interpreta as regras
• Aplica os estilos aos elementos correspondentes

Se várias regras se aplicam ao mesmo elemento, o navegador decide qual usar com base em regras bem definidas (cascata, herança e especificidade — veremos isso já já 👀).

CSS não “executa”

CSS não funciona como uma linguagem de programação.

Ele descreve estados visuais. O navegador resolve como aplicar essas descrições.

HTML + CSS trabalhando juntos

Imagine este HTML:

 <p>Olá, Contém Bits!</p> 

E este CSS:

 p { color: #428bca; font-size: 18px; } 

O HTML define o conteúdo. O CSS define a aparência. Cada um faz seu papel. No exemplo acima o parágrafo terá a cor azul (#428bca) e o tamanho de fonte fixado em 18 pixels.

Modelo mental correto

Se a estrutura for boa, o visual pode mudar quantas vezes quiser.

Na próxima aula, vamos aprender as formas de aplicar CSS e entender qual usar em cada situação.