Clases
Es muy posible que no queramos todos lo párrafos exactamente iguales, o que un encabezado en particular tenga una regla estilística diferente. Para ello, es posible definir clases dentro de los selectores para poder tratar estas excepciones de manera correcta.
¡A esto se le llama flexibilidad!
P {font-size: 11pt} p.cita { font-size: 10pt; font-style: italic }
En una primera definición del selector p, el cuerpo asignado es de 11 puntos tipográficos, sin embargo si el párrafo en cuestión es de la clase “cita”, éste adoptaría la segunda regla como suya, poniendo el cuerpo algo más pequeño, y en cursiva.
Una vez declarada esta excepción hay que indicar su uso. La clave está en el atributo class Aquí se muestra: <p class=”cita”> xxxxxxxxxx </p>
¿Estilos personales?
Es posible querer definir una clase en particular pero no aplicársela a un selector concreto. Sea:
.grande {font-size: 36pt}
Así le podemos aplicar la clase a cualquier etiqueta, simplemente indicándolo en su atributo class:
<ul class=”grande”>
Muchos programas de creación web tratan a estos estilos como “estilos personales” (Dreamweaver), pero en realidad son simplemente clases de uso genérico.
Bloque o carácter
Es posible que queramos aplicar un estilo a una selección de caracteres más que a un bloque delimitado por etiquetas HTML estándares como <p>, <h1> o <ul>.
Para ello tenemos la estupenda etiqueta <span>.
<p> Esto es <span class=”grande”> grande </span> y el resto no. </p>
Como se puede adivinar, las clases genéricas tienen aquí una de sus principales aplicaciones.
Selectores contextuales
Una curiosa aplicación es la de aplicar estilos a una determinada etiqueta siempre que esté dentro de los dominios de otra. Veamos.
strong {color: blue} h1 strong {color: green}
Tenemos una etiqueta como <strong>, que habitualmente pone los textos en negrita. Mediante la primera regla indicamos que ponga el texto en azul, además de su comportamiento habitual. Pero además le indicamos que en el caso que tenga como etiqueta padre a <h1> es decir, que el texto en negrita esté dentro de un encabezado de este tipo, el texto se escriba en verde.