A Regra CSS e sua Sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. 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 abaixo:

seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

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

p { <br>
font-size: 12px; /* ponto-e-vírgula é facultativo */<br>
}<br>

body {<br>
color: #000;<br>
background: #fff;<br>
font-weight: bold; /*ponto-e-vírgula é facultativo */<br>
}</div>

No exemplo a seguir, o seletor é o "documento todo" (body - a página web), 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"; 
}

Para maior legibilidade das folhas de estilo, é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor —, 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;}

NOTA: A razão do 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

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

h1, h2, h3, h4, h5, h6 {
color: #0f0;
}

O seletor classe

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

Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras 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.minhaclasse { 
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 abaixo:

<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>
Nota: CSS 2 mudou este conceito, permitindo declarar mais de uma classe, desde que o nome das classes sejam separados por um espaço.

<p class ="cor-um cor-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 definida na regra CSS declarada por último na folha de estilo.

Ao criar 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: #00f;
    }
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 >

O seletor ID

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

Você pode "inventar" um nome e com ele criar um ID ao qual definirá as regras 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 # ("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 "/*", e termina com " */". Veja o exemplo abaixo:

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

Por Mauricio Maujor Samy Silva