Você pode aplicar um estilo a uma classe dada de um elemento usando classes do CSS. Para fazer este, você tem que declarar um estilo para a classe que você liga o elemento ao estilo, atribuindo então essa classe ao elemento.

As classes são para você, se você desejar ter mais de um estilo de um Tag do HTML. Todo o Tag do HTML pode usar estas classes.

Sintaxe da classe do CSS

Usando um ponto (.) seguido pelo nome da classe, você declara uma classe do CSS. Você compõe o nome da classe você mesmo. Se você quiser incorporar as propriedades/valores a sua classe, você pode atribui-la após o nome da classe.

.class-name { property:value; }

Você pode prefixar o ponto com o nome do elemento do HTML se você quiser usar o mesmo nome da classe para elementos múltiplos, mas cada um com um estilo diferente.

html-element-name.class-name { property:value; }

Você poderia definir classes da folha do estilo para cada um, se você quisesse um parágrafo roxo da pia batismal e um parágrafo azul da pia batismal.

.purple {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #003399;
}

.blue {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #663399;
}

Aplicar então isto aos parágrafos diferentes usando-se depois do código:

<p class="purple">The purple paragraph text will go here.</p>

<p class="blue">The blue paragraph text will go here.</p>

O Tag do <span>

Usando o Tag do <span>, você pode também aplicar este às seções do HTML como esta:

<p class="purple">This text will be purple until you get to <span class="blue">these words, which are blue</span> and then the text carries on being purple.</p>

Se você desejar indicar o código em um diferente colorir dependendo de sua língua:

code.html { color: #4b0082 }
code.css { color: #191970 }

Por exemplo, usando o class~= " pastoral ", nós podemos atribuir a informação do estilo a todos os elementos como segue:

*.pastoral { color: green } /* all elements with class~=pastoral */

O seguinte atribui o estilo somente aos elementos H2 com o class~= " pastoral ":

H2.pastoral { color: green } /* H1 elements with class~=pastoral */

Dado estas réguas, o primeiro exemplo H2 abaixo não teria o texto verde, quando o segundo:

<H2>Not green</H2>
<H2 class="pastoral">Very green</H2>

Sem um elemento associado, você pode declarar classes como segue:

.note { font-size: small }

Exemplo da classe do CSS

<head>
<style type="text/css">
h1.css-section { color:#999999;}
p.css-section { color:#000099; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>

O/P: