A regra CSS e sua sintaxe

Introdução

Uma regra CSS segue uma sintaxe própria que define como será aplicado estilo a um ou mais elementos da marcação HTML de uma página. Um conjunto de regras CSS formam uma folha de estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado a seguir:

seletor { propriedade: valor; }

O significado de cada uma das partes da regra CSS é conforme descrito a seguir:

1. seletor: é um elemento da marcação HTML identificado pelo seu nome (por exemplo: <p>, <h1>, <form>), pelo nome de uma classe aplicada ao elemento da marcação HTML (por exemplo: .topo, .principal, .menu), pelo nome de um identificador ID aplicado ao elemento da marcação HTML (por exemplo: #tudo, #auxiliar, #rodape) ou por qualquer outro identificador CSS de elementos ou trechos da marcação HTML, genericamente denominados de seletores CSS.
2. propriedade: é a propriedade do elemento HTML ao qual será aplicada a estilização definida no valor (por exemplo: tamanho da fonte, cor do texto, altura do elemento).
3. valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, altura igual a 300px)
4. Ao conjunto propriedade: valor denominamos declaração CSS.

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e o valor separados por dois pontos e colocados entre chaves { }.

É possível escrever mais de uma declarações CSS em uma regra CSS com o objetivo de estilizar-se várias propriedades de um mesmo seletor. Neste caso deve-se usar ponto-e-vírgula para separar as declaração CSS constantes da regra CSS. O ponto-e-vírgula é facultativo quando a regra CSS for constituída de uma só declaração CSS e também facultativo após a última declaração CSS quando houver mais de uma declaração CSS.

É recomendável que se use, sempre, o ponto-e-vírgula após cada declaração CSS, pois no caso de futuramente ter que se acrescentar mais declarações na regra CSS não se corra o risco de esquecer eventual ponto-e-vírgula inicialmente omitido.

Observe os exemplos a seguir que esclarecem a sintaxe da regra CSS.

p {
  font-size: 12px; /* ponto-e-vírgula é recomendável */
}

body {
  color: #000;
  background-color: #fff;
  font-weight: bold; /* ponto-e-vírgula é recomendável */
}

No exemplo a seguir, o seletor é o "documento todo" (elemento body), a propriedade é a cor do fundo do documento e o valor é a cor branca.

body {
  background-color: #fff;
}

Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ' ':

h3 { 
  font-family: "Comic Sans MS"; 
}

h3 { 
  font-family: 'Comic Sans MS'; 
}

Para aumentar a legibilidade das folhas de estilo, é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor —, bem como separar o valor da propriedade com uso de um espaço em branco, como mostrado a seguir.

p {
  text-align: right; 
  color: #f00;
}

Isto não é obrigatório. A regra CSS a seguir tem o mesmo efeito da regra anterior e ambas as sintaxes estão corretas.

p {text-align:right;color:#f00;}

NOTAS:

1. Aumentar a legibilidade da folha de estilo conforme descrito é útil e indispensável na fase de desenvolvimento do projeto. Terminado o projeto deve-se "minificar" a folha de estilos, que é a técnica de se escrever a folha de estilos sem os espaços em branco entre as partes que a compõem e sem os espaços em branco entre as diferentes regras CSS, obtendo uma folha de estilos escrita em uma linha contínua.
   Isso visa a diminuir o número de bytes do arquivo da folha de estilo e aumentar a performance diminuindo o tempo de carregamento da página. Existem ferramentas para minificar folhas de estilos.


2. A razão de se recomendar o uso de ponto e vírgula na última declaração ou mesmo quando só há uma declaração é que durante a fase de desenvolvimento da Folha CSS quase sempre estaremos acresentando novas declarações e a última declaração quase nunca é a última naquela fase. Assim, esta prática certamente nos poupará revisões por ter esquecido um ponto e vírgula.

Agrupamento de Seletores

Agrupando seletores pode-se fazer com que uma regra CSS seja aplicada a mais de um seletor. Para agrupar seletores separe-os com uma vírgula. No exemplo abaixo agrupamos todos o elementos cabeçalho de níveis 1 e 2 os parágrafos e o elemento com a classe .box. A cor do texto de todos eles será verde.

h1, h2, p, .box {
  color: green;
}

Seletor classe

Mas você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo.

Você pode "inventar" um nome e definí-lo como valor a ser atribuido ao atributo class (classe) do elemento HTML. O nome "inventado" será o seletor para aplicar declarações CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML, usando classes diferentes para cada um deles.

A sintaxe para o seletor classe é mostrada a seguir. Elemento HTML mais um nome qualquer que você "inventa" precedido de . (ponto):

elemento.nomedaclasse { 
  propriedade: valor;
}

NOTA: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: use somente letras e os caracteres - (traço) e _ (sublinhado).

A HTML5 acabou com a restrição dos caracteres e na sintaxe dela você pode usar qualquer caractere exceto espaço em branco, contudo meu conselho anterior continua válido.

Por exemplo: suponha que você precisa de dois estilos para parágrafos em seu documento: um parágrafo com letras na cor preta e um parágrafo com letras na cor azul. Crie duas classes conforme mostrado a seguir.

p.cor-um { 
  color: #000;
} 
	
p.cor-dois { 
  color: #0ff;
}

Ao escolher nomes para classes não use nomes que lembrem a apresentação. Prefira nomes que lembrem a estrutura. Para o exemplo mostrado nomear as classes .cor-preta e .cor-azul é uma péssima escolha. Se no futuro você resolver alterar a cor dos elementos azuis para verde vai ficar com uma regra CSS sem sentido.

No seu documento HTML as classes seriam aplicadas conforme mostrado a seguir:

<p class="cor-um"> este parágrafo será na cor preta.</p>
<p class="cor-dois">este parágrafo será na cor azul.</p>

Em CSS 1 não é válido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo está errado:

<p class="cor-um" class="cor-dois"> 
  Aqui o texto do parágrafo.
</p>

As CSS 2 alteraram este conceito, permitindo declarar mais de uma classe, desde que o nome das classes sejam separados por um espaço.

<p class="cor-um fonte-dois"> 
  Aqui o texto do parágrafo.
</p>

Nesse caso aplicam-se ao parágrafo as regras CSS definidas nas duas classes. Havendo conflito de declarações aplica-se o efeito cascata. No nosso caso o parágrafo será na cor e tamanho de fonte definidos nas regras CSS para as duas classes (cor-um e fonte-dois).

Ao nomear uma classe você talvez queira que ela seja aplicável a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual você deseja atribuir cor azul:

.cor-tres {
  color: blue;
}

No exemplo a seguir tanto o cabeçalho <h2> como o parágrafo <p> serão na cor azul:

<h2 class="cor-tres">
  Este cabeçalho é na cor azul.
</h2>

<p class="cor-tres">
  Este parágrafo é na cor azul.
</p>

Seletor ID

O seletor ID difere do seletor classe, por ser ÚNICO. Um seletor ID de determinado nome só pode ser definido a UM e somente UM elemento HTML dentro do documento.

Você pode "inventar" um nome e com ele criar um ID que será o seletor para definir a regra CSS. Um determinado ID só pode ser aplicado a UM elemento HTML.

A sintaxe para o seletor ID é mostrada a seguir. Um nome qualquer que você "inventa" precedido do sinal # ("cerquilha", "tralha" ou "jogo-da-velha" ):

#meuID {
  propriedade: valor;
}

Nota: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z . Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: use somente letras e os caracteres - (traço) e _ (sublinhado).

A HTML5 acabou com a restrição dos caracteres e na sintaxe dela você pode usar qualquer caractere exceto espaço em branco, contudo meu conselho anterior continua válido.

Inserindo comentários nas CSS

Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. Daqui há alguns meses a menos que você seja um privilegiado, terá esquecido a maior parte daquilo que você levou horas para "bolar". O comentário introduzido no código, será ignorado pelo navegador. Um comentário nas CSS começa com o sinal /* e termina com */. Observe o exemplo a seguir:

/* este é um comentário*/
p { 
  font-size: 14px;
  /* este é outro comentário*/
  color: #000;
  font-family: Arial, Serif;
}

Compartilhe essa matéria com seus amigos