Hojas de estilo en cascada (CSS) (página 2)

Clases en CSS

Una clase en CSS es una forma de agrupar propiedades que luego pueden ser aplicadas a un elemento específico usando su atributo "class". Estos grupos reciben nombres y pueden ser definidos exclusivamente para un elemento o para cualquiera. Para definir una clase, los autores deben escribir el elemento para el cual está declarado, seguido por un punto y el nombre de la clase. El bloque de propiedades va encerrado entre llaves como en los ejemplos anteriores.

En el siguiente ejemplo definiremos tres clases: la primera llamada "importante" para el elemento "p", la segunda llamada "diminuto" para todos los elementos y la tercera llamada "grande" para todos los elementos también.

Nota que el uso de un asterisco en lugar del elemento indica que esta clase puede ser aplicada a cualquier elemento (es lo mismo que no usar nada). También ten en cuenta que la primera declaración no especifica que la clase debe ser automáticamente aplicada a los elementos "p" del documento; sólo los elementos "p" con el valor "importante" en su atributo "class" serán afectados por este estilo.

Usando el atributo "class"

Usemos el ejemplo anterior para mostrar como aplicar las propiedades agrupadas en las clases a los elementos en un documeto HTML. En el siguiente ejemplo, aplicaremos las tres clases a tres párrafos respectivamente.

Recuerda que la clase "importante" ha sido solo definida para el elemento "p" de modo que ha funcionado bien en el ejemplo anterior, pero no funcionará si la apllicamo a otro elemento (como por ejemplo una tabla, tag HTML table).

En este caso, el agente de usuario intentará encontrar una clase con el nombre "importante" que haya sido definida para el elemento "a" (a.important {...) o para todos los elementos (.important {...). como no existe ninguna clase con esa definición, ninguna propiedad se aplica al elemento.

el atributo "class" también soporta listas de clases separadas por espacios como valor, lo cual puede ser muy útil para aplicar muchas propiedades de diferentes clases a un solo elementos de una vez.

Este párrafo no solo tendrá un color rojo (de la clase "importante") sino que además tendrá un tamaño de feunte de "12px" (de la clase "grande").

Selectores ID

Los selectores ID trabajan en forma similar a las clases con un par de excepciones. En primer lugar, en la definición de un selector ID, el elemento del nombre va seguido por un símbolo numeral (#) y un identificador (que se corresponde con el valor del atributo "id" del elemento al que pretende afectar).

Excepto por el símbolo "#" y el nombre (que debe ser un identificador), este método funciona igual que las clases.

Usando el atributo "id"

La aplicación de propiedades CSS a elementos HTML mediante los selectores ID se da a través de los atributos "id" de los elementos. Como ya debes saber, el atributo "id" está diseñado para actuar como un identificador para elemento (por lo que debe ser único en el documento). Esto claramente significa, que las propiedades definidas a través de este método sólo podrán aplicarse a un único elemento por documento.

En este caso podríamos decir que las propiedades se refieren a un elemento específico, caso contrario al de las clases que son diseñadas para que los elementos se refieran a ellas. En el siguiente ejemplo, un párrafo tiene un valor en su atributo "id" que coincide con una de las fediniciones previas.