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

CSS, que significa Cascading Style Sheets (Folhas de Estilo em Cascata), é uma linguagem de estilo usada para descrever a aparência de um documento escrito em HTML. O CSS descreve como os elementos HTML devem ser exibidos. Isso pode controlar o layout de várias páginas da web de uma só vez. CSS permite que você aplique estilos a páginas da web. Mais importante, CSS permite que você faça isso de forma independente do HTML que está sendo usado para estruturar o documento.

Seletores CSS

Os seletores CSS são a parte do CSS que seleciona o elemento HTML que você deseja estilizar. Existem diversos tipos de seletores em CSS, incluindo seletores de tipo, de classe, de ID, de atributo, entre outros.

• Seletores de tipo: Selecionam elementos com base no nome do elemento HTML. Por exemplo, o seletor de tipo p selecionará todos os parágrafos.
• Seletores de classe: Selecionam elementos com base no atributo de classe. Por exemplo, o seletor de classe .intro selecionará todos os elementos com class="intro".
• Seletores de ID: Selecionam um elemento com base no atributo de ID. Por exemplo, o seletor de ID #firstname selecionará o elemento com id="firstname".
• Seletores de atributo: Selecionam elementos com base em um atributo ou valor de atributo. Por exemplo, o seletor de atributo [target="_blank"] selecionará todos os elementos com target="_blank".

Propriedades CSS

As propriedades CSS são o que você deseja estilizar no elemento selecionado. Por exemplo, você pode querer alterar a cor, a fonte, o tamanho, a margem, o preenchimento, o plano de fundo, a borda, e muitas outras propriedades dos elementos HTML. Cada propriedade tem um valor específico.

Por exemplo, a propriedade color controla a cor do texto. Então, se você quiser que o texto de todos os parágrafos seja vermelho, você usaria o seguinte código CSS:

		
p {
  color: red;
}
		
	

Valores CSS

Os valores CSS são os ajustes que você faz nas propriedades. No exemplo acima, red é o valor da propriedade color. Os valores podem ser palavras-chave, como red, números, como 12px, porcentagens, como 50%, ou uma variedade de outras unidades de medida.

Os valores também podem ser mais complexos, como url("image.jpg") para a propriedade background-image, ou rgba(255, 0, 0, 0.3) para uma cor semi-transparente.

Em resumo, CSS é uma linguagem poderosa que permite aos desenvolvedores controlar precisamente como os elementos HTML são exibidos na tela. Compreender os seletores, propriedades e valores CSS é a chave para se tornar um desenvolvedor front-end eficaz.