Tutoriais para Designers

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:

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 no caso de mais de uma.

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

Ver os exemplos abaixo:

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

body {
color: #000000;
background: #FFFFFF;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}

No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a propriedade é o fundo do documento e o valor é a cor branca.

body {
background: #FFFFFF;
}

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 abaixo:

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

Isto não é obrigatório! A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes estão corretas:

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

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 projeto da Folha CSS quase sempre estaremos acresentando novas declarações e a última declaração quase nunca é a última na fase de projeto. Assim, esta prática certamente nos poupará revisões por ter esquecido um ponto e vírgula.!!!!

Fonte: Maujor