Sintaxe do CSS

A sintaxe do CSS é um pouco diferente do xHTML, embora isso não difícil de se entender, e bem simples de se compreender a sintase é

[caption id="attachment_258" align="aligncenter" width="300"] css[/caption]

divida em três partes

seletor {propriedade:valor}

Decifrando a sintaxe, o seletor é ou pode ser tag, id ou classe que você utilizar para identificar qual o elemento que receberá o estilo.

Propriedade é o que será modificado, exemplo o fundo de um elemento a cor de um texto, entre outros atributos.

O valor é que será atribuído a elemento, exemplo, a tag p irá trocar a cor utilizando a propriedade color, o valor pode ser blue.

Exemplo prático:

p {color: red}

No exemplo acima toda a tag que é o seletor irá modificar a propriedade cor para o valor de cor vermelha, para bom português toda a tag p irá ficar com a da letra vermelha.

Cada elemento tem várias propriedade e cada propriedade tem o seu valor e cada seletor tem sua propriedade especifica. A propriedade e o valor tem : utilizado para separar o que é propriedade e valor no final de cada propriedade é adicionado ; para determinar o fim de cada valor, pode ser utilizado em uma linha um múltiplas linhas.

Você pode definir múltiplos valores, com a propriedade separada por virgula, ou valores individuais. Como mostrado a baixo:

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

Você pode ver no exemplo acima, que foi utilizando o seletor body, adicionando a propriedade background adicionando a cor ao fundo e mais um elemento, que define a fonte que será utiliza, você pode perceber que é utilizando a fonte Trebechut MS, para acionar mais valores a este elemento utiliza-se a virgula. O final irá resultar um fundo cinza e todos os texto sendo escritos com a fonte Trebechut MS.

Herança de elementos

Quando você aninhar um elemento dentro de outro, o elemento aninhado herdará as propriedades atribuídas ao elemento que contém. A menos que você modifique os valores de elementos internos de forma independente.

Por exemplo, a fonte que declara no elemento body, será herdada em todos os textos do arquivo, a não ser que declare outra fonte em outro momento.

body {font-family: Verdana, serif;}

Agora todo o textos será utilizado com a fonte Verdana.

Se você quiser utilizar outro texto, em outro elemento, por exemplo em h1 ou em um paragrafo, então você pode fazer o seguinte:

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

Agora todos os h1 terão a fonte Georgia e todos os parágrafos, terão a fonte Tahoma, os outros elementos irão seguir os estilos declarados no elemento body, ou seja irão ficar com a fonte de Verdana.

Há casos em que elementos aninhados não herdam as propriedades de elementos que contém.

Vamos ao exemplo prático, se você definir uma margem de 20 pixels para o elemento body, os outros elementos, dentro da tag body, eles não irão herdar está propriedade.

body {margin: 20px;}

Combinando seletores

Você pode combinar seletores, dentro de um seletor e os outros irão seguir o mesmo.

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

Como você pode ver, no código acima, foi agrupado,  os seletores por vírgula. No final o resultado acima, todos os elementos terão a cor verde, com a fonte Georgia.

Utilizando comentários

Comentários são utilizados para você explicar em seu código como um determinando elemento está funcionando, de modo a ajudar outras pessoas que estão mexendo em seu código, ou simplesmente para ajudar a você lembrar o que você fez no passado.

Vamos ao exemplo de um comentário.

/* Exemplo de comentário */