Sintaxe CSS

Sintaxe

A sintaxe CSS é constituida de três partes: um seletor (selector), um propriedade (property) e um valor (value):

selector {property: value}

O seletor é normalmente o elemento/tag HTML que você deseja definir, a propriedade é o atributo que você deseja mudar, e cada propriedade pode ter um valor. A propriedade e o valor são separados por dois pontos e circundadas por chaves:

body {color: black}

Se o valor contém múltiplas palavras, ponha aspas em torno do valor:

p {font-family: "sans serif"}

Observação: Se você deseja especificar mais de uma propriedade, você deve separar cada propriedade com um ponto e vírgula. O exemplo abaixo mostra como definir um parágrafo alinhado no centro, com uma cor de texto vermelha:

p {text-align:center;color:red}

Para tornar as definições de estilo mais legíveis, você pode descrever uma propriedade em cada linha, assim:

p
{
text-align: center;
color: black;
font-family: arial
}

Agrupamento

Você pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos header (título). Todos os elementos header serão verdes:

h1,h2,h3,h4,h5,h6 
{
color: green
}

O Seletor class (classe)

Com o seletor class você pode definir diferentes estilos para o mesmo tipo de elemento HTML. Digamos que você gostaria de ter dois tipos de parágrafos em seu documento: uma parágrafo alinhado à direita, e um parágrafo centralizado. Eis como você pode fazer isso com estilos:

p.right {text-align: right}
p.center {text-align: center}

Você tem que usar o atributo class no seu documento HTML:

<p class="right">
Este parágrafo será alinhado à direita.
</p>

<p class="center">
Este parágrafo será centralizado.
</p>

Observação: Somente um atributo class pode ser especificado para cada elemento HTML! O exemplo abaixo está errado:

<p class="right" class="center">
Este é um parágrafo.
</p>

Você também pode omitir o nome da tag no seletor para definir um estilo que será usado por todos os elementos HTML que tem uma certa classe. No exemplo abaixo, todos os elementos HTML com class="center" serão centralizados:

.center {text-align: center}

Nocódigo abaixo tanto o elemento h1 quanto o elemento p tem class="center". Isto significa que ambos os elementos seguirão as regras do seletor ".center":

<h1 class="center">
Este título será centralizado
</h1>

<p class="center">
Este parágrafo será também centralizado.
</p> 

O seletor id

O seletor id é diferente do seletor class selector! Enquanto um seletor class pode ser aplicado a VÁRIOS elementos numa página, um seletor id sempre se aplica a somente UM elemento.

Um atributo ID deve ser único dentro do documento.

A regra de estilo abaixo será aplicada a um elemento p que tem seu valor id como "para1":

p#para1
{
text-align: center;
color: red
}

A regra se estilo abaixo será aplicada ao primeiro elemento que tiver o valor id de "wer345":

*#wer345 {color: green}

A regra de estilo abaixo será aplicada a este elemento h1:

<h1 id="wer345">Algum texto</h1>

A regra de estilo abaixo será aplicada a um elemento p que tiver o valor id de "wer345":

p#wer345 {color: green}

A regra acima não será aplicada a este elemento h2:

<h2 id="wer345">Algum texto</h2>

Comentários em CSS

Você pode inserir um comentário na CSS para explicar o seu código, o que pode ajuda-lo quando você editar o código fonte numa data posterior. Um comentário será ignorado pelo navegador. Um comentário em CSS começa com "/*", e termina com "*/", assim:

/* Este é um comentário */
p
{
text-align: center;
/* Este é outro comentário */
color: black;
font-family: arial
}