Curso de CSS / O que é CSS e qual é a diferença para HTML

CSS (Folhas de Estilo em Cascata) controla a aparência e o layout de um documento HTML, incluindo cores, fontes, espaçamento e posicionamento de elementos. O HTML descreve o conteúdo e sua estrutura; o CSS determina como essa estrutura é apresentada.

Como HTML e CSS dividem responsabilidades

Imagine que você está criando uma página de informações sobre jardins. O fato de que «Small Garden» (Pequeno Jardim) é o título mais importante da página é representado por h1 em HTML. O CSS determina se o título é exibido em verde e qual é o tamanho da fonte. Só porque a cor é verde, não significa que um parágrafo normal tenha o significado de um título.

JavaScript é uma linguagem de programação que adiciona comportamento às páginas web. O CSS também pode alterar a forma ou mostrar animação quando o mouse é passado por cima, então mudar a tela não significa necessariamente que JavaScript foi usado. Aqui nos concentramos primeiro em separar conteúdo e aparência.

Por que uma página tem estilos antes de você escrever CSS

Os navegadores possuem estilos padrão. É por isso que os títulos aparecem grandes, há espaço entre os parágrafos e os links aparecem sublinhados sem precisar escrever CSS diretamente. Fontes e margens padrão podem variar dependendo do navegador e das configurações do usuário. Ao adicionar CSS, você pode personalizar a aparência que deseja.

Cole o seguinte HTML em um editor de texto, salve como index.html no formato UTF-8 e abra no seu navegador. Certifique-se de que o nome do arquivo não seja index.html.txt. Se a extensão do arquivo estiver oculta, verifique a extensão no formato de salvamento do editor e nas propriedades do arquivo.

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

Este fragmento é um exemplo da estrutura do texto. Se você quiser começar imediatamente, use o exemplo completo abaixo. Se você ler o título e o texto guia primeiro, é fácil distinguir se o conteúdo real ou apenas a aparência mudou ao alterar o CSS.

Leia seletores, propriedades e valores

h1 {
  color: #087f5b;
}

h1 é o seletor, color é a propriedade, e #087f5b é seu valor. Uma propriedade e valor unidos por dois pontos formam uma declaração, como color: #087f5b;. A cor hexadecimal de seis dígitos representa os componentes vermelho, verde e azul. Para mais detalhes, veja Sintaxe CSS: Seletores, Declarações, Comentários e Erros.

Esta regra altera a cor do texto do elemento h1 no HTML para verde. Ela não traduz frases nem adiciona parágrafos. Para distinguir e decorar apenas o texto de orientação, adicione class="notice" ao HTML e selecione .notice no CSS. O ponto é uma notação de seletor de classe no CSS e não está incluído no nome da classe no HTML.

O papel do CSS na apresentação de documentos web também é explicado na Introdução ao CSS da MDN.

Execute o exemplo completo Small Garden

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

Quando você abrir o arquivo salvo, verá um título verde em um fundo claro, e a informação de horário de funcionamento terá uma borda e espaço. O conteúdo dentro do elemento style é CSS. A tabela a seguir fornece uma descrição mínima para leitura das propriedades usadas nos exemplos.

Você não precisa memorizar todas as propriedades neste estágio. Primeiro, identifique qual elemento o seletor corresponde e qual aspecto desse elemento cada declaração altera. Uma folha de estilo externa permite que você reutilize o mesmo design em várias páginas. Para mais detalhes, veja Aplicar CSS com estilos Inline, Internos e Externos.

Altere três valores e compare os resultados

1. Substitua color em h1 por #1d4ed8. Se você salvar e recarregar, apenas o título grande ficará azul. As cores do h2 e dos parágrafos gerais do guia do visitante não estão sujeitas a essa regra.
2. Altere line-height de body de 1.7 para 2. A altura da linha do corpo será maior. Você pode ver as diferenças mais facilmente inserindo um parágrafo com mais de duas linhas ou estreitando a janela.
3. Substitua background-color em .notice por #fff4cc. Apenas o fundo das informações de horário de funcionamento fica amarelo. O fundo de toda a página é especificado separadamente no corpo, portanto permanece o mesmo.

Em vez de alterar os três valores de uma vez, salve e verifique cada vez que modificar um item. Se os resultados forem diferentes, verifique se o arquivo alterado e o arquivo aberto no navegador são os mesmos e se as chaves e os dois-pontos permanecem. Quando terminar o exercício, redefina os três valores para o estado original, atualize a página e compare com a tela original. Durante esse processo, a chave é manter a estrutura do título, parágrafo e link do HTML.