Sintaxe, declaração e seletores CSS

Fala, meus consagrados! Beleza?

O Cascading Style Sheets (CSS) desempenha um papel fundamental na web moderna, permitindo o design e a apresentação de páginas web. Para trabalhar efetivamente com CSS, é essencial compreender sua sintaxe, declarações e seletores. Neste artigo, exploraremos esses conceitos fundamentais para ajudá-lo a criar estilos impressionantes para suas páginas da web.

A sintaxe do CSS é relativamente simples, mas é vital para criar regras de estilo eficazes. Cada regra começa com um seletor, seguido por um bloco de declarações delimitado por chaves. As declarações consistem em uma propriedade e um valor separados por dois pontos, e terminam com um ponto e vírgula.

Sintaxe:

As declarações CSS são responsáveis por definir o estilo de elementos HTML selecionados. Uma declaração consiste em uma propriedade e um valor. A propriedade descreve a característica a ser estilizada, como cor, tamanho ou margem, e o valor especifica como a propriedade deve ser estilizada.

Os seletores CSS são usados para direcionar elementos HTML específicos que se deseja estilizar. Os seletores são padrões de elementos que informam ao navegador quais elementos HTML devem ser selecionados para que os valores de propriedade CSS dentro da regra sejam aplicados a eles.

Existem vários tipos de seletores, desde seletores de elementos simples como h1 (que seleciona todos os cabeçalhos de nível 1) até seletores de classe como .botao (que selecionam elementos com a classe “botao”). Os seletores são usados para selecionar elementos HTML com base em dados do elemento: 

• Nome;
• ID;
• Classe;
• Atributo;
• Outras informações.

Os principais tipos de seletores CSS são:

• Seletor de elemento:
  • Seleciona elementos HTML com base no nome desses elementos;
  • p { … }
• Seletor de id:
  • Seleciona um elemento HTML específico com base no atributo id desse elemento;
  • #id { … }
• Seletor de classe:
  • Seleciona elementos HTML com base no atributo de classe;
  • .classe { … }

Figura 1: Principais tipos de seletores CSS.

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

Exemplo em CSS:

p {

font-family: verdana;

font-size: 20px;

}

No exemplo acima, todos os elementos <p> de uma página web que referencie o trecho CSS será da fonte Verdana e de tamanho 20px.

Exemplo de trecho HTML de uma página:

<div></div>

<p></p>

O seletor para o elemento <p> irá afetar apenas esse elemento do trecho acima.

O seletor de id seleciona um elemento HTML específico com base no atributo id desse elemento.

O id de um elemento deve ser único dentro de uma página e não pode começar com número. Para selecionar um elemento com um id específico, escreve-se um caractere hash (#) seguido pelo id do elemento.

Exemplo em CSS:

#param1 {

text-align: center;

color: red;

}

No exemplo acima, apenas o elemento que contém o atributo id com o valor param1 será da alinhado de forma centralizada e da cor vermelha.

Exemplo de trecho HTML de uma página:

<div id=“para1”></div>

<div></div>

<p></p>

Do trecho HTML acima, apenas o elemento <div> que contém esse id será afetado.

O seletor de classe seleciona elementos HTML com base no atributo class desses elementos.

O nome da classe não pode começar com um número. Para selecionar um elemento com uma classe específica, escreve-se um caractere de ponto (.) seguido pelo nome da classe.

Exemplo em CSS:

.center {

text-align: center;

color: red;

}

No exemplo acima, apenas o elemento que contém o atributo id com o valor param1 será da alinhado de forma centralizada e da cor vermelha.

Exemplo de trecho HTML de uma página:

<div></div> 

<div class=“center”></div> 

<p></p> 

<p class=“center”></p>

Do trecho HTML acima, apenas os elementos <div> e <p> que contêm a classe center serão afetados.

Para aplicarmos regras de CSS para todos os elementos HTML na página, usa-se o seletor universal (*).

Exemplo em CSS:

* {

text-align: center;

color: red;

}

Por fim, para a minimização de código CSS, pode-se agrupar seletores. Basta separar cada seletor com uma vírgula.

Exemplo sem agrupamento:

h1 {

text-align: center;

color: red;

}

p {

text-align: center;

color: red;

}

Exemplo com agrupamento:

h1, p {

text-align: center;

color: red;

}

O CSS é uma linguagem de estilo poderosa que permite controlar a apresentação de elementos HTML. Entender a sintaxe, declarações e seletores CSS é o primeiro passo para se tornar um web designer eficaz. Com a prática e o conhecimento dos conceitos mencionados, você estará no caminho certo para criar sites visualmente atraentes e bem estruturados.

Espero que tenham gostado! 

Forte abraço e até a próxima jornada!

_________________________

Professor Rogerão Araújo