8.3. Introdução ao CSS: seletores, propriedades e valores

Estudar CSS (Cascading Style Sheets) é essencial para qualquer desenvolvedor front-end. É a linguagem que dá estilo e layout às páginas da web, tornando-as visualmente atraentes e funcionais. Neste capítulo, vamos nos concentrar em um aspecto fundamental do CSS: os seletores, propriedades e valores. Além disso, vamos explorar os três tipos principais de seletores CSS: Elemento, Classe e ID.

Seletores CSS

Os seletores são a maneira como o CSS identifica os elementos HTML aos quais deseja aplicar estilo. Existem vários tipos de seletores, mas vamos nos concentrar nos três principais: Elemento, Classe e ID.

Seletores de Elemento

Os seletores de elemento são os mais básicos. Eles selecionam elementos HTML com base em seu nome de tag. Por exemplo, se quisermos estilizar todos os parágrafos (<p>) em uma página, podemos usar o seletor de elemento 'p'.

p {
  color: blue;
  font-size: 14px;
}

Neste exemplo, todos os parágrafos na página serão renderizados em azul e com um tamanho de fonte de 14px.

Seletores de Classe

Os seletores de classe são mais específicos do que os seletores de elemento. Eles selecionam elementos HTML com base em uma classe atribuída a eles. As classes são atribuídas aos elementos HTML usando o atributo 'class'. Por exemplo, podemos atribuir a classe 'destaque' a um parágrafo específico (<p>) como este:

<p class="destaque">Este é um parágrafo destacado.</p>

E então, podemos usar o seletor de classe '.destaque' para estilizar apenas esse parágrafo:

.destaque {
  color: red;
  font-size: 18px;
}

Neste exemplo, apenas o parágrafo com a classe 'destaque' será renderizado em vermelho e com um tamanho de fonte de 18px.

Seletores de ID

Os seletores de ID são os mais específicos de todos. Eles selecionam um único elemento HTML com base em um ID atribuído a ele. Os IDs são atribuídos aos elementos HTML usando o atributo 'id'. Por exemplo, podemos atribuir o ID 'titulo' a um cabeçalho específico (<h1>) como este:

<h1 id="titulo">Este é o título.</h1>

E então, podemos usar o seletor de ID '#titulo' para estilizar apenas esse cabeçalho:

#titulo {
  color: green;
  font-size: 24px;
}

Neste exemplo, apenas o cabeçalho com o ID 'titulo' será renderizado em verde e com um tamanho de fonte de 24px.

Propriedades e Valores CSS

Uma vez que selecionamos os elementos HTML que queremos estilizar, usamos propriedades e valores CSS para definir o estilo. As propriedades são aspectos do estilo que queremos alterar, como cor, tamanho da fonte, margem, preenchimento, etc. Os valores são as configurações específicas que queremos aplicar a essas propriedades.

Por exemplo, na regra CSS abaixo:

p {
  color: blue;
  font-size: 14px;
}

'color' e 'font-size' são propriedades, enquanto 'blue' e '14px' são seus respectivos valores.

Existem muitas propriedades e valores CSS diferentes para aprender, e a combinação certa pode criar uma variedade infinita de estilos para suas páginas da web.

Em resumo, os seletores, propriedades e valores CSS são ferramentas poderosas em seu arsenal de desenvolvimento front-end. Compreender como eles funcionam e quando usá-los é a chave para criar páginas da web visualmente atraentes e funcionais.