Índice

Las clases HOJA DE ESTILO:Clases

Ahora es necesario explicar una peculiaridad de las hojas de estilo: es posible asignar estilos distintos a una misma etiqueta. En este caso, vamos a definir clases y subclases. Veamos cómo funciona:

  • p { font-family: arial, helvetica ; }: es una regla de estilo.

  • p. helvetica { font-family: times ; }: es una clase.

  • .blue { text-align:center ; color: blue ; }: es una subclase.

El siguiente es un ejemplo completo de las tres posibilidades:

<STYLE TYPE="text/css"> 
body { font-family: sans-serif ; font-size: 12pt ; color: black } 
b { color: red ; font-weight: bold ; }  
h2.red { color: red ; } 
.blue { font-family: sans-serif ; color: blue ; font-size: 10pt ;  
font-style: italic }  
</STYLE> 
</HEAD> 
<BODY> 
<b>El texto es el del selector "b": en negrita y en rojo.</b> 
<h2 class="red">El texto está en rojo con "H2".</h2> 
<p class="blue">El texto es el de la subclase .blue: en color 
azul, en estilo cursiva con un cuerpo de 10pt.</p> 
</BODY>
images/03-02.png