Formas de aplicar estilos em construção CSS

Revisão dos métodos que se podem aplicar estilos às páginas web mediante CSS.

Vamos ver outra vez distintos modos de aplicar estilos às páginas. É um tema que já vimos no manual de CSS, mas vale a pena refrescar conceitos e ampliar a informação que foi oferecida em seu dia.

Aplicação de estilo a etiquetas

Pode-se atribuir o estilo a uma etiqueta concreta de HTML. Para isso, na declaração de estilos escrevemos a etiqueta e entre chaves, os atributos de estilo que desejarmos.

body {
    background-color: #f0f0f0;
    color: #333366;
}

Podemos aplicar o mesmo estilo em um conjunto de etiquetas. Para isso, indicamos as etiquetas seguidas por vírgulas e logo, entre chaves, os atributos que quisermos definir.

h1, p{
    color: red;
}

Neste caso se define que os cabeçalhos de nível 1 e os parágrafos, tenham a letra vermelha.

Definição de classes

Podemos utilizar uma classe se desejarmos criar um estilo específico, para logo aplica-lo a distintos elementos da página. As classes na declaração de estilos se declaram com um ponto antes do nome da classe.

.minhaclasse{
    color: blue;
}

Para atribuir o estilo definido por uma classe em um elemento HTML, simplesmente se acrescenta o atributo class à etiqueta que quisermos aplicar tal classe. O atributo class se atribui ao nome da classe a aplicar. Por exemplo:

<p class="minhaclasse">este parágrafo tem o estilo definido na classe "minhaclasse".</p>

O parágrafo anterior se apresentaria com a cor azul. A definição de classes e sua utilização é simples, vejamos um exemplo mais detalhado:

Para a seguinte declaração de estilos:

body, td, p{
    background-color: #000000;
    color: #ffffff;
}

.inverso{
    background-color: #ffffff;
    color: #000000;
}

Foi definido um fundo preto e cor de texto branco para o corpo da página, assim como as células e os parágrafos. Logo, foi declarado uma classe, de nome "inverso", com as cores ao contrário, ou seja, com fundo branco e texto negro.

<body>
<p>Olá, isto é um parágrafo normal</p>
<p class="inverso">Parágrafo com as cores invertidas</p>
<table>
<tr>
    <td class="inverso">INVERSO</td>
    <td>NORMAL</td>
</tr>
</table>
</body>

Esta página tem, geralmente, o fundo negro e o texto branco. O primeiro parágrafo, que é u parágrafo normal, continua com esta definição geral de estilos, mas o segundo parágrafo, cujo foi aplicado a classe "inverso", tem o fundo branco e o texto em preto. Em relação à tabela, em sua primeira célula foi atribuída a classe "inverso", portanto será visto com fundo branco e cor de texto em preto. Enquanto que a segunda célula, que não tem atribuído nenhuma classe, se apresentará como foi definido na regra geral.

Para conhecer os resultados obtidos no exemplo anterior podemos vê-lo em uma página a parte.

Estilos que só se utilizam uma vez

Também podemos ter um estilo específico para um único elemento, que não vai se repetir em nenhum outro caso. Para isso temos os estilos atribuídos por identificador. Os identificadores se definem em HTML utilizando o atributo id na etiqueta que desejarmos identificar. O valor do atributo id será o que nós definirmos.

<div id="camada1">

Na folha de estilos, para definir o aspecto desse elemento com id único, escreve-se o caractere "jogo da velha", seguido do identificador indicado na etiqueta e entre chaves os atributos css que desejarmos.

#camada1{
    font-size: 12pt;
    font-family: arial;
}

Neste caso, foi atribuído fonte de tamanho 12 pontos e corpo arial.

Como se pode concluir na leitura destas linhas, geralmente é preferível utilizar estilos definidos em classes do que aos definidos com identificadores, a não ser que estivermos certos de que esse estilo não vai se repetir em todo o documento.