Es normal querer definir unos estilos globales en hojas externas que homogenicen el aspecto de nuestras páginas, y luego, en una página concreta quiere variar el estilo en alguna etiqueta concreta.
Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente en esa etiqueta.
Pero también puede suceder que esta definición de un estilo concreto queramos aplicarla a otra etiqueta.
Una clase es una definición de un estilo que en principio no está asociado a alguna etiqueta HTML, pero que podemos asociar a etiquetas concretas.
Para ello, en primer lugar definimos la clase:
.nombre _de_nuestra_clase{valor1: valor; valor2:valor; etc.}
Es decir, escribiendo un punto seguido del nombre que le queramos dar a la clase, y definiendo el estilo como lo definimos para cualquier otra etiqueta: propiedad:valor separados por punto y coma y encerrados entre llaves. Además, podremos definir cuantas clases necesitemos.
Para aplicar el estilo de una clase a una etiqueta utilizamos el parámetro CLASS:
<etiqueta CLASS="nombre _de_nuestra_clase"> ... </etiqueta>
Donde nombre _de_nuestra_clase es el nombre que le hemos dado a la clase, sin el punto.
Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier etiqueta de HTML. El estilo no se vincula a una etiqueta concreto sino a una 'clase'.
Esta clase, actúa como atributo de cualquier etiqueta, cada vez que se quiera llamar a ese estilo, basta con incluir el nombre de esa clase dentro de la etiqueta correspondiente.
<HTML> <HEAD> <TITLE>Titulo</TITLE>
<STYLE TYPE="texto css"> H1.nuevaclase { color:red; } .nuevaclase2 {color:blue;} </STYLE>
</HEAD> <BODY>
<H1 CLASS="nueva clase">Este texto aparece en rojo</H1>
<H1>Este texto aparece como un H1 normal</H1>
<H1 class="nuevaclase2">Este texto aparece en blue</H1>
<P class="nueva clase">Este texto aparece en rojo</P>
</BODY> </HTML>
Se pueden establecer clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos, por ejemplo:
H1.clase1 {font: 15px; color: red;}
H1.clase2 {font: 15px; color: blue;}
H1.clase3 {font: 15px;color: green;}
Esto se transformaría a nivel de código:
<H1 CLASS="clase1 ">Este texto se vería en color rojo</H1>
<H1 CLASS="clase2">Este texto se vería en color blue</H1>
<H1 CLASS="clase3">Este texto se vería en color green</H1>
Llámenos al 91 747 82 06 para más información.