CSS é responsável pelos estilos de uma página web. Todos esses estilos são compostos por várias regras CSS. Uma regra CSS é composta por duas partes principais: um selector e um bloco de declaration. Vamos dar uma olhada na sintaxe básica:

selector {
  property: value;
}

Um seletor é um padrão usado em CSS para identificar e direcionar elementos HTML específicos para estilização. Exemplos de seletores incluem seletores de tipo, seletores de classe e seletores de ID. As chaves fornecidas na sintaxe básica são conhecidas como um bloco de declaração. Um bloco de declaração aplica um conjunto de estilos para um dado seletor ou seletores. Dentro do bloco de declaração, você terá uma série de declarações. Cada declaração consiste em uma propriedade e um valor. A propriedade é o identificador CSS que especifica qual recurso está sendo estilizado. Um exemplo de uma propriedade seria a propriedade background-color. O valor seria a configuração específica aplicada a essa propriedade. Por exemplo, se a propriedade for background-color, um valor poderia ser purple, que define a cor de fundo como roxa. Após cada nome de propriedade, você precisa colocar dois pontos e após cada valor, deve haver um ponto e vírgula. Agora que você conhece a sintaxe de uma regra CSS, vamos dar uma olhada em um exemplo. Ative o editor interativo e clique na aba styles.css para ver o código CSS.

<link rel="stylesheet" href="styles.css">
<h1>Learning about CSS</h1>

<p>Example paragraph element</p>
<p>Another example paragraph element</p>

p {
  color: blue;
}

Nesta regra CSS, um seletor de tipo seleciona todos os elementos de parágrafo na página. Dentro do bloco de declaração, há uma declaração. A declaração consiste na propriedade color com um valor definido como blue. Isso vai mudar a cor do texto de todos os elementos de parágrafo para blue. Se você quiser aplicar o mesmo conjunto de estilos a múltiplos seletores, você pode criar uma lista de seletores com cada seletor separado por uma vírgula. Aqui está um exemplo de estilização de múltiplos seletores (para interagir com o exemplo, ative o editor interativo):

<link rel="stylesheet" href="styles.css">

<h1 id="title">Example heading</h1>
<h2 class="subheading">Example subheading</h2>
<p>This paragraph is not affected by the selector.</p>

#title,
.subheading {
  color: navy;
}

Nesta lista de seletores, há um seletor id que direciona o elemento HTML com o valor id de title. Todos os seletores id devem começar com o símbolo hash #. Então há uma vírgula seguida de um seletor class que seleciona todos os elementos HTML com o valor class de subheading. Todos os seletores de classe devem começar com um ponto . A lista inteira de seletores receberá o mesmo estilo, com a cor do texto definida para navy.