Definición de Clases de Estilo

Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todas las etiquetas de ese tipo en el documento utilizarán dicho estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solución correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento.

Sintaxis CSS

<style type="text/css">

all.GREENBOLD {color: green; font-weight: bold;}

</style>

Sintaxis JavaScript

<style type="text/javascript">

classes.GREENBOLD.all.color = "green";

classes.GREENBOLD.all.fontWeigth = "bold";

</style>

Uso de la hoja de estilo

<h3 class=GREENBOLD>Este titulo es muy verde</h3>

<p class=GREENBOLD>

Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para

cualquier elemento HTML.

</p>

<blockquote class=GREENBOLD>

Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los

bloques resalten del resto de la página.

</blockquote>

Resultado del ejemplo

Este titulo es muy verde

Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML.

Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques resalten del resto de la página.

Con sintaxis JavaScript no se pueden utilizar guiones "-". La razón es que el guión es un operador de JavaScript. Los nombres de clases no pueden contener tampoco operadores como: -, +, *, /, %,. Cuando se definen clases de estilo se puede especificar a qué elementos se podrán aplicar dicha clase, o usaremos la palabra clave all para indicar que todos los elementos podrán utilizarla. En el siguiente ejemplo se crea una clase de estilo amarillo que podrá utilizar cualquier elemento HTML. También se crea una clase rojo que sólo podrán utilizar párrafos y bloques.

Sintaxis CSS

<style type="text/css">

all.amarillo {color: yellow; font-weight: bold;}

p.rojo {color: red; font-weight: bold;}

blockquote.rojo {color: red; font-weight: bold;}

</style>

Sintaxis JavaScript

<style type="text/javascript">

tags.amarillo.all.color = "yellow";

tags.amarillo.all.fontWeight = "bold";

tags.rojo.p.color = "red";

tags.rojo.p.fontWeight = "bold";

tags.rojo.blockquote.color = "red";

tags.rojo.blockquote.fontWeight = "bold";

</style>

Uso de la hoja de estilo

<p class="rojo">Este párrafo es rojo.</p>

<p>Este párrafo es del color por defecto, porque no utiliza la clase rojo</p>

<blockquote class="rojo">Este bloque usa la clase rojo.</blockquote>

<h4 class="rojo">

Este título intenta usar la clase rojo, pero no le está permitido

</h4>

<p class="amarillo">Este párrafo es amarillo</p>

<h4 class="amarillo">

Este título es amarillo porque usa la clase amarillo

</h4>

Resultado del ejemplo

Este párrafo es rojo.

Este párrafo es del color por defecto, porque no utiliza la clase rojo

Este bloque usa la clase rojo.

Este título intenta usar la clase rojo, pero no le está permitido

Este párrafo es amarillo

Este titulo es amarillo porque usa la clase amarillo

Un elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se utilizará la primera. Por ejemplo, en el siguiente código un párrafo intenta usar las clases rojo y amarillo. Como resultado final se acaba empleando la clase rojo que es la primera que se especifica.

Ejemplo:

<p class="rojo" class="amarillo">Otro párrafo rojo.</p>

Resultado:

Otro párrafo rojo.