Regras CSS

Uma regra CSS uma declarao que segue uma sintaxe prpria e que define como ser aplicada um 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 o valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vrgula para separ-las. O ponto-e-vrgula facultativo no caso de propriedade nica e tambm aps a declarao da ltima propriedade quando houver mais de uma. No entanto de boa tcnica usar-se sempre o ponto-e-vrgula aps cada regra para uma propriedade. Observe os exemplos a seguir que esclarecem a sintaxe da regra CSS. p{ font-size: 12px; /* ponto-e-vrgula facultativo */ }

body { color: #000; background: #fff; font-weight: bold; /*ponto-e-vrgula facultativo */ }

No exemplo a seguir, o seletor o "documento todo" (body - a pgina web), a propriedade a cor do fundo do documento e o valor a cor branca. body { background-color: #fff; } Se o valor for uma palavra composta, dever estar entre aspas duplas " ", ou simples ': h3 { font-family: "Comic Sans MS"; } 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 a seguir. p{ text-align: right; color: #f00; } Isto no obrigatrio. A regra CSS a seguir tem o mesmo efeito da regra anterior e ambas as sintaxes esto corretas. p {text-align: right; color: #f00;} NOTA: A razo do uso de ponto e vrgula na ltima declarao ou mesmo quando s h uma declarao que durante a fase de desenvolvimento da Folha CSS quase sempre acrescentamos novas declaraes e a ltima declarao quase nunca a ltima naquela fase. 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: #0f0; } 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 da HTML, usando classes diferentes para cada um deles. A sintaxe para o seletor classe mostrada a seguir. Elemento HTML mais um nome qualquer que voc "inventa" precedido de . (ponto): elemento.minhaclasse { 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.

Por exemplo: suponha que voc precisa de dois estilos para pargrafos no seu documento: um pargrafo com letras na cor preta e um pargrafo com letras na cor azul. Crie duas classes conforme mostrado a seguir. p.cor-um { color:#000; }

p.cor-dois { color:#0ff; } No seu documento HTML as classes seriam aplicadas conforme abaixo: <p class ="cor-um"> este pargrafo ser na cor preta.</p>

<p class ="cor-dois">este pargrafo ser na cor azul.</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:

.cor-tres { color: #00f; } No exemplo a seguir tanto o cabealho <h2> como o pargrafo <p> sero na cor azul: <h2 class="cor-tres"> Este cabealho na cor azul. </h2>

<p class="cor-tres"> Este pargrafo na cor azul. </p > O seletor ID O seletor ID difere do seletor classe, por ser NICO. Um seletor ID de determinado nome s pode ser aplicado a UM e somente UM elemento HTML dentro do documento. Voc pode "inventar" um nome e com ele criar um ID ao qual definir as regras CSS. Um determinado ID s pode ser aplicado a UM elemento HTML. A sintaxe para o seletor ID mostrada a seguir. Um nome qualquer que voc "inventa" precedido do sinal #

#meuID { 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 somente letras e os caracteres - (trao) e _ (sublinhado).

Inserindo comentrios nas CSS Voc pode inserir comentrios nas CSS para explicar o seu cdigo, e principalmente ajud-lo a relembrar de como voc estruturou e qual a finalidade de partes importantes do cdigo. O comentrio introduzido no cdigo, ser ignorado pelo navegador. Um comentrio nas CSS comea com o "/*", e termina com " */". Veja o exemplo abaixo: /* este um comentrio*/ p{ font-size: 14px; color: #000; font-family: Arial, Serif; } /* este outro comentrio*/