Copyright © 2007 by Noble7fix  ·  All Rights reserved  ·  E-Mail: noble7fix@gmail.com

A sintaxe CSS é constituída por 3 partes: o selector,  a propriedade e o valor:

selector {propriedade: valor}

O selector é normalmente o elemento/tag HTML que deseja definir, a propriedade é o atributo que deseja mudar e cada propriedade pode levar um valor. A propriedade e o valor são separados por dois pontos e inseridas entre chavetas:

Nota: se o valor forem várias palavras,  coloque aspas-

Body {color: black}

P {font-family: "sans serif"}

Nota: Se você desejar especificar mais de uma propriedade, é preciso separar cada propriedade com um ponto e vírgula.  O exemplo a seguir mostra como definir um paragrafo alinhado ao centro, com um texto de cor vermelha:

Para fazer o estilo definições mais legível, é possível descrever uma propriedade em cada linha, como esta:

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

Agrupamento

Você pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo a seguir, temos agrupados todos os elementos de um cabeçalho.Todos os elementos do cabeçalho serão exibidos com a cor do texto a verde :

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

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

Neste caso  o elemento h1 (cabeçalho) tem atribuido o elemento p class = "center". Isto significa que ambos os elementos seguirão as regras ". Center" selector:

Observação NÃO inicie o nome de uma classe com um número!  Não vai funcionar no Mozilla / Firefox.

Adicionar elementos de estilo com atributos especiais

Também pode aplicar estilos de elementos HTML com atributos especiais.

A regra de estilo  irá fazer corresponder todos os  elementos que têm um tipo de  atributo com um valor de "texto":

Input [type = "text"] (background-color: blue)

Com a classe selector pode-se definir diferentes estilos para o mesmo tipo de elemento HTML.

Por exemplo gostaria de ter dois  parágrafos no seu documento: um alinhado ao lado direito, e outro alinhado ao centro um centro-alinhados n º. Veja como você pode fazê-lo:

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

A classe Selector

Esta regra de estilo irá fazer corresponder ao elemento p  que tem um id com o valor de "para1":

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

<p class="right">

Este parágrafo será alinhado à direita.

</p>

<p class="center">

Este parágrafo será alinhado ao centro.

</p>

Nota: Para aplicar mais de uma classe por determinado elemento, a sintaxe é:

Este parágrafo será estilizado pela classe "centro" e  classe "negrito".

<p class="center bold">

Este é um parágrafo. 

</p>

Também pode omitir o nome da tag  no selector para definir um estilo que será utilizado por todos os elementos HTML que possuem uma certa classe.  No exemplo a seguir, todos os elementos HTML com class = "center" serão alinhados ao centro:

.center {text-align: center}

<h1 class="center"> 

Este cabeçalho será alinhados ao centro. 

</h1> 

<p class="center"> 

Este parágrafo também será alinhado ao centro.

</p>  

Observação NÃO inicie o nome de uma classe com um número!  Não vai funcionar no Mozilla / Firefox.

O Selector ID

Pode definir estilos para elementos HTML  com o selector id.  O selector id é definido com um #.

A seguinte regra de  estilo regra  irá fazer corresponder ao elemento que tem um  atributo id com um valor de "green":

# green {color: green}

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

CSS Comentários

Os comentários são usadas para explicar o código, e pode ajudá-lo, quando  precisar de editar o código fonte  mais tarde.  Um comentário será ignorado pelos browsers.  Um comentário CSS começa com  "/*", e termina com "*/", como este:

/ * Este é um comentário * /

p {text-align: center;

/ * Este é outro comentário * /

color: black; font-family: arial}