1

Sintaxe
A sintaxe CSS constituida de trs 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 so separados por dois pontos e circundadas por chaves:
body {color: black}

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
Se o valor contm mltiplas palavras, ponha aspas em torno do valor::
p {font-family: "sans serif"}

Observao: Se voc deseja especificar mais de uma propriedade, voc deve separar cada propriedade com um ponto e vrgula. O exemplo abaixo mostra como definir um pargrafo alinhado no centro, com uma cor de texto vermelha:
p {text-align:center;color:red}

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
Para tornar as definies de estilo mais legveis, 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 vrgula. No exemplo abaixo agrupamos todos os elementos header (ttulo). Todos os elementos header sero verdes:
h1,h2,h3,h4,h5,h6 { color: green }

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
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 pargrafos em seu documento: uma pargrafo alinhado direita, e um pargrafo centralizado. Eis como voc pode fazer isso com estilos:
p.right {text-align: right} p.center {text-align: center}

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
Voc tambm 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" sero centralizados:
.center {text-align: center}

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
Nocdigo abaixo tanto o elemento h1 quanto o elemento p tem class="center". Isto significa que ambos os elementos seguiro as regras do seletor ".center":
<h1 class="center"> Este ttulo ser centralizado </h1> <p class="center"> Este pargrafo ser tambm centralizado. </p>

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
O seletor id O seletor id diferente do seletor class selector! Enquanto um seletor class pode ser aplicado a VRIOS elementos numa pgina, 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 }

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
O seletor id (continuao) A regra de 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 no ser aplicada a este elemento h2:

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

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

Sintaxe
Comentrios em CSS Voc pode inserir um comentrio na CSS para explicar o seu cdigo, o que pode ajuda-lo quando voc editar o cdigo fonte numa data posterior. Um comentrio ser ignorado pelo navegador. Um comentrio em CSS comea com "/*", e termina com "*/", assim:
/* Este um comentrio */ p{ text-align: center; /* Este outro comentrio */ color: black; font-family: arial }
INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

10

Sintaxe
Voc tem que usar o atributo class no seu documento HTML:
<p class="right"> </p>
Este pargrafo ser alinhado direita.

<p class="center"> </p>

Este pargrafo ser centralizado.

Observao: Somente um atributo class pode ser especificado para cada elemento HTML! O exemplo abaixo est errado:
<p class="right" class="center"> Este um pargrafo. </p>

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

11

Sintaxe
Voc tem que usar o atributo class no seu documento HTML:
<p class="right"> </p>
Este pargrafo ser alinhado direita.

<p class="center"> </p>

Este pargrafo ser centralizado.

Observao: Somente um atributo class pode ser especificado para cada elemento HTML! O exemplo abaixo est errado:
<p class="right" class="center"> Este um pargrafo. </p>

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web

12

Referncia Bibliogrfica
LEMAY, Laura. Aprenda a Criar Pginas Web com

HTML e XHTML em 21 dias. So Paulo. Pearson

Education, 2002.

http://www.clem.ufba.br/tuts/css/c02.htm

INSTITUTO FEDERAL DE EDUCAO, CINCIA E TECNOLOGIA TOCANTINS Campus Paraso do Tocantins

Aplicativos Web PRONATEC Programador Web