1 UFCD: Criao de Sites Web 24/09/2013 a 31/10/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

:: A REGRA CSS :: A REGRA CSS E SUA SINTAXE

Uma regra CSS uma declarao que segue uma sintaxe prpria e que define como ser aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compe-se de trs partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:
seletor { propriedade: valor; }

Seletor: genericamente, o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser vlida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...); Propriedade: o atributo do elemento HTML ao qual ser aplicada a regra (por exemplo: font, color, background, etc...). Valor: a caracterstica especfica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...) Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar pontoe-vrgula para separ-las. O ponto-e-vrgula facultativo no caso de propriedade nica e tambm aps a declarao da ltima propriedade no caso de mais de uma. No entanto de boa tcnica usar-se sempre o ponto-e-vrgula aps cada regra para uma propriedade. Ver os exemplos abaixo:
p{ font-size: 12px; /* ponto-e-vrgula facultativo */ } body { color: #000000; background: #FFFFFF; font-weight: bold; /*ponto-e-vrgula facultativo */ }

No exemplo abaixo, o seletor o "documento todo" (body - a pgina web), a propriedade o fundo do documento e o valor a cor branca.
body { background: #FFFFFF; } Se o valor for uma palavra composta, dever estar entre aspas duplas " ", ou simples ': h3 {

2 UFCD: Criao de Sites Web font-family: "Comic Sans MS" } 24/09/2013 a 31/10/2013
Cludia Saraiva | claudiasaraiva.design@gmail.com

Para maior legibilidade das folhas de estilo, de boa prtica usar linhas distintas para escrever cada uma das declaraes propriedade e seu valor , como mostrado abaixo:
p{ text-align: right; color: #FF0000; }

Isto no obrigatrio! A regra abaixo tem o mesmo efeito da regra acima e ambas as sintaxes esto corretas:
p {text-align: right;color: #FF0000;}

NOTA: A razo do uso de ponto e vrgula na ltima declarao ou mesmo quando s h uma declarao que durante a fase de projeto da Folha CSS quase sempre estaremos acresentando novas declaraes e a ltima declarao quase nunca a ltima na fase de projeto. Assim, esta prtica certamente nos poupar revises por ter esquecido um ponto e vrgula.!!!!

Agrupamento de Seletores
Uma regra CSS quando vlida para vrios seletores, estes podem ser agrupados. Separe cada seletor com uma vrgula. No exemplo abaixo agrupamos todos os elementos cabealho. A cor de todos os cabealhos ser verde.
h1, h2, h3, h4, h5, h6 { color: #00FF00; }

O seletor classe
Mas voc no est restrito somente aos elementos HTML (tags) para aplicar regras de estilo! Voc pode "inventar" um nome e com ele criar uma classe a qual definir as regras CSS. E o mais interessante das classes, que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, voc pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles. A sintaxe para o seletor classe mostrada abaixo. Elemento HTML mais um nome qualquer que voc "inventa" precedido de . (ponto):
elemento HTML.minhaclasse { propriedade: valor; }

3 UFCD: Criao de Sites Web 24/09/2013 a 31/10/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

Nota: Para o nome que voc "inventa" evite usar nmeros e caracteres especiais. Tanto quanto possvel use s letras de a-z e de A-Z. H restries quanto ao uso de nmeros e caracteres. Minha experincia e conselho: Use s letras! Por exemplo: suponha que voc queira ter dois tipos de pargrafos em seu documento: um pargrafo com letras na cor preta e um pargrafo com letras na cor azul.
p.corum { color:#000000; } p.cordois { color:#0000FF; }

No seu documento HTML as regras seriam aplicadas conforme abaixo:

<p class ="corum"> este pargrafo ter cor preta.</p> <p class ="cordois"> este pargrafo ter cor azul. </p>

Este item foi atualizado em 2007/07/03 Em CSS 1 no vlido atribuir mais de uma classe para um elemento HTML. O exemplo abaixo est errado:
<p class ="corum" class ="cordois"> Aqui h um erro. </p>

Nota: CSS 2 mudou este conceito, permitindo declarar mais de uma classe, desde que o nome das classes sejam separados por um espao.
<p class ="corum cordois"> Aqui no h erro. </p>

Ao criar uma classe voc talvez queira que ela seja aplicvel a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual voc deseja atribuir cor azul:
.cortres { color: #0000FF;

4 UFCD: Criao de Sites Web } 24/09/2013 a 31/10/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

No exemplo a seguir tanto o cabealho <h2> como o pargrafo <p> tero cor azul:
<h2 class="cortres"> Este cabealho azul. </h2> <p class="cortres"> Este pargrafo azul. </p >

O seletor ID
O seletor ID difere do seletor de classe, por ser NICO. Um seletor ID s pode ser aplicado a UM e somente UM elemento HTML dentro do documento. Voc pode "inventar" um nome e com ele criar uma ID a qual definir as regras CSS. Uma ID s pode ser aplicada a UM elemento HTML. A sintaxe para o seletor ID mostrada abaixo. Um nome qualquer que voc "inventa" precedido de # ("tralha", "jogo-da-velha" :-)):
#minhaID { propriedade: valor; }

Nota: Para o nome que voc "inventa" evite usar nmeros e caracteres especiais. Tanto quanto possvel use s letras de a-z e de A-Z. H restries quanto ao uso de nmeros e caracteres. Minha experincia e conselho: Use s letras!

Inserindo comentrios nas CSS

Voc pode inserir comentrios nas CSS para explicar seu cdigo, e principalmente ajud-lo a relembrar de como voc estruturou e qual a finalidade de partes importantes do cdigo. Daqui h alguns meses a menos que voc seja um privilegiado, ter esquecido a maior parte daquilo que voc levou horas para "bolar". O comentrio introduzido no cdigo, ser ignorado pelo browser. Um comentrio nas CSS comea com o "/*", e termina com " */". Veja o exemplo abaixo:
/* este um comentrio*/ p{ font-size: 14px; /* este outro comentrio*/ color: #000000; font-family: Arial, Serif; }