Sintaxe CSS e seletores básicos

As regras CSS dizem ao navegador como o HTML deve aparecer. Quando você entende a estrutura básica de uma regra, consegue controlar cores, tamanho do texto, botões, cartões e muitas outras partes visuais de uma página.

Como é uma regra CSS

Uma regra CSS tem duas partes principais:

• Um seletor, que diz ao navegador qual HTML deve receber estilos.
• Um bloco de declarações, que diz ao navegador como aplicar esses estilos.

O bloco de declarações fica entre chaves {}.

Seletor, propriedade e valor

Dentro do bloco de declarações, CSS usa declarações. Veja o que cada parte significa:

• A propriedade é a característica visual que você quer alterar, como color ou font-size.
• O valor é a configuração escolhida para essa propriedade, como blue ou 32px.
• Os dois-pontos : separam a propriedade do valor.
• O ponto e vírgula ; marca o fim da declaração.

Uma declaração é escrita assim:

Os pontos e vírgulas são importantes porque ajudam o navegador a entender onde uma instrução CSS termina e onde a próxima começa.

Primeiro exemplo de código

<h1 class="page-title">Minha primeira página com estilos</h1>
<p>Este parágrafo usa um seletor de elemento.</p>
<button id="main-button">Começar</button>

<style>
  h1 {
    color: blue;
  }

  .page-title {
    font-size: 32px;
  }

  #main-button {
    background-color: green;
  }
</style>

Explicação do código

O bloco <style> contém três regras CSS.

A primeira regra usa o seletor h1 para encontrar o título e deixar o texto azul.

A segunda regra usa .page-title para encontrar elementos com a classe page-title e definir o tamanho da fonte como 32px.

A terceira regra usa #main-button para encontrar o elemento com o ID main-button e alterar a cor de fundo do botão para verde.

Seletores de elemento

Seletores de elemento apontam diretamente para tags HTML.

Por exemplo, esta regra estiliza todos os parágrafos da página:

<p>Primeiro parágrafo</p>

<p>Segundo parágrafo</p>

<style>
  p {
    color: green;
  }
</style>

Seletores de elemento são úteis para definir estilos básicos, mas afetam todas as tags correspondentes.

Seletores de classe

Seletores de classe permitem estilizar elementos específicos sem alterar todos os elementos do mesmo tipo.

Um seletor de classe começa com um ponto ..

<p class="highlight">Este parágrafo está destacado.</p>

<p>Outro parágrafo.</p>

<style>
  .highlight {
    color: orange;
  }
</style>

Você pode reutilizar a mesma classe em muitos elementos.

Seletores de ID

Seletores de ID são usados para um elemento único em uma página.

Um seletor de ID começa com #.

<button id="main-button">Começar</button>

<style>
  #main-button {
    background-color: yellow;
  }
</style>

No HTML comum, o mesmo ID deve ser usado apenas uma vez por página. Se você precisa aplicar o mesmo estilo a muitos elementos, use uma classe.

Seletores agrupados

Seletores agrupados permitem que vários seletores compartilhem o mesmo estilo. Separe cada seletor com uma vírgula.

<h1>Título 1</h1>

<h2>Título 2</h2>

<p>Outro parágrafo.</p>

<style>
  h1,
  h2,
  p {
    color: blue;
  }
</style>

Esta regra aplica a mesma cor de texto azul aos elementos h1, h2 e p.

Mini tarefa

Veja esta regra CSS:

Identifique o seletor, a propriedade e o valor.

Resposta:

• O seletor é button.
• A propriedade é color.
• O valor é white.

Quiz curto

Pergunta 1: Qual símbolo inicia um seletor de classe?

Resposta: Um ponto ..

Pergunta 2: Qual símbolo inicia um seletor de ID?

Resposta: Uma cerquilha #.

Pergunta 3: Por que as declarações CSS geralmente terminam com ponto e vírgula?

Resposta: Para marcar onde uma instrução termina antes de a próxima começar.

Pequeno desafio

Tente estilizar o cartão de prática abaixo:

• Altere a cor do título usando o seletor de classe.
• Altere o tamanho do parágrafo usando o seletor de classe.
• Dê ao botão uma nova cor de fundo usando seu ID.

<h2 class="card-title">Cartão de prática</h2>
<p class="card-text">Estilize este texto com CSS.</p>
<button id="practice-button">Clique aqui</button>

<style>
  /* coloque seu CSS abaixo */

</style>

Resumo

• Uma regra CSS tem um seletor e um bloco de declarações.
• Declarações são escritas como property: value;.
• Seletores de elemento estilizam todas as tags HTML correspondentes.
• Seletores de classe começam com . e podem ser reutilizados.
• Seletores de ID começam com # e devem ser únicos em uma página.
• Seletores agrupados usam vírgulas para aplicar o mesmo estilo a vários seletores.