Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Continuando o guia sobre CSS, hoje iremos ver a Sintaxe CSS, ela é um pouco diferente da sintaxe (x)HTML, mas é bem fácil, ela consiste em 3 partes:

seletor { propriedade:valor }

Onde: O seletor é o elemento (x)HTML que você deseja denominar, a propriedade é o valor real da propriedade, e o valor é o estilo que se aplica a essa prorpiedade. Cada seletor pode ter propriedades múltiplas, e cada propriedade dentro desse seletor pode ter valores independentes. A propriedade e o valor são separados por dois pontos e ficam contidos dentro de 2 colchetes. As propriedades múltiplas são separadas por ponto e vírgula. Os valores múltiplos dentro de uma propriedade são separados por vírgula, e se um valor individual contiver mais de uma palavra, você deve colocá-lo dentro de uma citação. Abaixo você pode ver um exemplo:

body {
     background:#cccccc;
     font-family:"Trebuchet MS", Verdana, Arial, serif;
}

Como podem ver acima, eu separei o valor da propriedade font-family por vírgula, e coloquei a fonte Trebuchet MS dentro de uma citação. O resultado no navegador seria que o corpo da página teria a cor cinza e as fontes seriam as que eu defini alí, pelo menos as que a grande maioria dos usuários tem instaladas no computador.

Herança

Quando você aninha um elemento dentro de outro, o elemento aninhado herdará as propriedades atribuídas ao elemento container. A menos que você modifique os valores dos elementos internos independentemente. Por exemplo, a fonte declarada no body, será herdada por todos os elementos de nosso documento, ao menos que você declare um outro valor para qualquer outro seletor.

body { font-family:Arial, Verdana, serif; }

Como podem ver acima, todos o texto de nosso documento terá a fonte Arial, ao menos, que por exemplo, você queira alterar a fonte do título da página:

h1 { font-family:Georgia, sans-serif; }

A partir de agora, todo <h1> de nossa página terá a fonte Georgia. Mas há casos onde os elementos aninhados não herdam as propriedades dos outros elementos, por exemplo, se ajustar-mos a margem do nosso body a 10px, os elementos contidos dentro do mesmo não herdarão essa propriedade por defeito:

body { margin:10px; }

Combinando Seletores

Você pode combinar elementos dentro de um seletor na seguinte forma:

h1, h2, h3, h4, h5, h6 {
     color:#CCCCCC;
     font-family:Georgia, sans-serif;
}

Como vcês podem ver no código acima, eu agrupei todos os seletores de título, e os separei por vírgula, o resultado é que todos os títulos terão a cor cinza e a fonte será Georgia, caso o usuário não tenha a fonte instalada no micro, ela passa a ser sans-serif.

Comentários

Os comentários são muito úteis para lhe ajudar a entender por que você usou determinada propriedade, ou até mesmo para relembrar quem é quem no seu código. Também é muito útil para aquelas pessoas que querem estudar o seu código. Abaixo você pode ver um exemplo de comentário em CSS:

/* Isso aqui é um comentário */

Tradução do artigo original de: CSS Basics.