CSS - Sintaxe

João E. -

Sintaxe CSS

Uma regra CSS consiste em um seletor e um bloco de declaração. O seletor aponta para o elemento HTML que você deseja estilizar. O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula. Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.

Exemplo de Regra CSS

p {
  color: red;
  text-align: center;
}

p é o seletor, e { color: red; text-align: center; } é o bloco de declaração. O bloco de declaração contém duas declarações: color: red; e text-align: center;.

Seletores CSS

Os seletores CSS são usados para selecionar os elementos HTML que você deseja estilizar. Os seletores CSS podem ser nomes de elementos, nomes de classes, nomes de id ou nomes de atributos.

  1. O seletor de elemento seleciona elementos HTML com base no nome do elemento.

Exemplo de Seletor de Elemento

p {
  font-size: 16px;
}
  1. O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. O id de um elemento é único dentro de uma página, então o seletor de id é usado para selecionar um elemento único. Para selecionar um elemento com um id específico, escreva um caractere hash (#) seguido pelo id do elemento:

Exemplo de Seletor de ID

#my-element {
  background-color: blue;
}
  1. O seletor de classe seleciona elementos HTML com um atributo de classe específico. Para selecionar elementos com uma classe específica, escreva um caractere de ponto (.) seguido pelo nome da classe:

Exemplo de Seletor de Classe

.my-class {
  color: green;
}

Blocos de Declaração CSS

Um bloco de declaração CSS é cercado por chaves {} e pode conter várias declarações terminadas com ponto e vírgula (;).

Uma declaração consiste em duas partes:

  • Propriedade (nome predefinido que se refere a características estilísticas)
  • Valor (atribuído às propriedades)

Exemplo de Múltiplas Declarações

{
  color: blue;
  font-size: 12px;
  width: 100%;
}
  • color: blue; define a cor do texto.
  • font-size: 12px; define o tamanho da fonte.
  • width: 100%; define a largura em relação ao seu contêiner pai.

Combinando seletores e blocos de declaração, você pode criar regras que controlam a aparência das suas páginas web.

Usando CSS

O CSS pode ser adicionado a documentos HTML de três maneiras: inline, interna e externa.

CSS Inline

Estilos inline são usados para aplicar um estilo a um único elemento HTML. Para usar estilos inline, adicione o atributo style ao elemento relevante. O atributo style pode conter qualquer propriedade CSS.

Exemplo: Título com Estilo Inline

<h1 style="color: blue; font-size: 12px;">Título com Estilo Inline</h1>

CSS Interno

Estilos internos são definidos dentro do elemento <style>, na seção <head> de uma página HTML. A folha de estilo interna deve ser usada apenas quando uma única página HTML precisa de um estilo único.

Exemplo de CSS Interno

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>
<body>

  <h1>Este é um título</h1>
  <p>Este é um parágrafo.</p>

</body>
</html>

CSS Externo

Com estilos externos, você pode mudar a aparência de um site inteiro alterando apenas um arquivo. Cada página HTML deve incluir uma referência ao arquivo de folha de estilo externo dentro do elemento <link>, na seção head. Uma folha de estilo externa pode ser escrita em qualquer editor de texto e salva com a extensão .css. O arquivo .css externo não deve conter nenhuma tag HTML.

Exemplo de CSS Externo

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <h1>Este é um título</h1>
  <p>Este é um parágrafo.</p>

</body>
</html>

O arquivo externo styles.css:

h1 {
  color: navy;
  margin-left: 20px;
}

A maneira mais comum de adicionar CSS a páginas HTML é usando arquivos CSS externos, para que várias páginas compartilhem a mesma aparência.