O que é CSS?

Introdução

CSS significa Cascading Style Sheets (Folhas de estilo em cascata). É a linguagem usada para estilizar páginas web.

HTML dá estrutura a uma página. CSS controla como essa estrutura aparece: cores, espaçamento, fontes, fundos, bordas e layout.

Uma página web pode existir sem CSS, mas normalmente ficará simples e sem estilo. CSS transforma conteúdo estruturado em uma página mais clara, mais legível e mais útil visualmente.

A palavra cascading significa que várias regras de estilo podem se aplicar ao mesmo elemento. Quando regras entram em conflito, o navegador decide qual vence com base na cascata, especificidade e ordem.

HTML vs CSS

HTML e CSS são linguagens diferentes, mas trabalham juntas.

HTML cria o conteúdo e a estrutura, como títulos, parágrafos, listas, botões e seções.
CSS controla o design visual, como cores, tamanhos de fonte, espaçamento e layout.

Pense em construir uma casa:

HTML é a fundação, a estrutura, os cômodos e as paredes.
CSS é a pintura, os móveis, a iluminação e a decoração.

Você precisa da estrutura primeiro. Depois, CSS pode estilizar essa estrutura.

CSS e HTML semântico

CSS pode estilizar qualquer elemento HTML, mas funciona melhor quando seu HTML tem significado.

Por exemplo, usar elementos como <main>, <section>, <h1>, <p> e <button> torna a página mais fácil de entender antes de qualquer estilo ser adicionado.

Depois, CSS pode melhorar o design sem mudar o significado do conteúdo.

Regra básica de CSS

Uma regra CSS diz ao navegador como o HTML selecionado deve aparecer.

Toda regra CSS tem três partes principais:

Seletor: o elemento HTML ou grupo de elementos que você quer estilizar.
Propriedade: a característica visual que você quer mudar.
Valor: a configuração que você escolhe para essa propriedade.

Aqui está um exemplo curto:

Somente leitura

Nesta regra:

h1 é o seletor.
color é a propriedade.
blue é o valor.

Seletor, propriedade e valor em CSS

Formas de adicionar CSS

Há três formas comuns de adicionar CSS a um documento HTML.

CSS inline: você escreve estilos diretamente dentro de um elemento HTML usando o atributo style.
CSS interno: você escreve regras CSS dentro de uma tag <style> no documento HTML.
CSS externo: você escreve CSS em um arquivo separado, como style.css, e conecta esse arquivo à página HTML.

CSS externo é a melhor abordagem de longo prazo para sites reais, porque muitas páginas podem compartilhar a mesma folha de estilos.

Exemplo executável

Aqui está um pequeno documento HTML que usa uma tag interna <style>.

Clique em Mostrar saída para ver como CSS muda a página.

Editável

<!doctype html>
<html>
  <head>
    <style>
      h1 {
        color: darkblue;
      }

      p {
        font-size: 18px;
      }

      button {
        background-color: green;
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Bem-vindo ao CSS!</h1>
      <p>Este é meu primeiro parágrafo estilizado.</p>
      <button>Clique aqui</button>
    </main>
  </body>
</html>

Mini exercício

Edite o exemplo executável acima.

Tente fazer estas mudanças:

Mude a cor do título h1 para purple.
Mude o tamanho do parágrafo p para 22px.
Mude a cor do texto do button para black.
Mude a cor de fundo do button para yellow.

Depois clique em Mostrar saída e confira a prévia.

Resumo

CSS significa Cascading Style Sheets.
HTML cria a estrutura da página, enquanto CSS controla o design visual.
Uma regra CSS normalmente tem seletor, propriedade e valor.
CSS pode ser adicionado inline, internamente com <style> ou externamente com uma folha de estilos.
Folhas de estilo externas são a melhor prática para sites maiores.

Continue aprendendo

Continue aprendendo CSS passo a passo praticando com exemplos pequenos e mudando um estilo por vez.