Para definir estilos en CSS (originalmente, en inglés, se les llama rules), se debe contar con un selector (también conocido como nombre de clase), al cual se le asignan atributos y valores. En otras palabras, se representa de la siguiente forma:

Siguiendo con el ejemplo del tema anterior, el selector es "titulo", los atributos son "font" y "color" y sus valores son "bold 16px arial,verdana" y "#333", respectivamente. El punto delante del selector indica que es una clase específica, mientras que aquéllos que no lo presentan son considerados globales.

Cada renglón conformado por atributo y su valor (atributo: valor;) representan la declaración en CSS. Todas las declaraciones que se aplican a un selector, conforman lo que se llama Estilo (que suele ser referenciado como clase) y, en conjunto, son los que, ni más ni menos, estructuran y aplican formato visual a todas las páginas de nuestro sitio.

Siguiendo con el ejemplo que manejamos, el gráfico siguiente presenta la estructura de la regla (o estilo) titulo que se debe utilizar en CSS para definirla.


Las clases globales se deben manejar con cuidado, ya que se aplicarán a todas las etiquetas que contengan ese nombre. Por ejemplo, para aplicar un mismo estilo a todos los formularios de nuestro sitio, se debería asignar algo como lo siguiente:

El estilo anterior se aplicará a todos los formularios de nuestro sitio, aún si se intenta aplicar una clase o estilo específico. Por experiencia, te sugiero tratar de evitar en la medida de lo posible los estilos o clases globales.

Es importante que recuerdes que las clases llevan este punto delante de las mismas, pues existen también los ID. Un ID, o identificador, se puede aplicar sólo una vez a un elemento de nuestra página. Es decir, no puedes tener algo como lo siguiente:

Como podrás comprender (y algo que verás más adelante), los ID son utilizados en las etiquetas DIV que se encargan de estructurar a la página, por lo que sólo se presentan una vez dentro de la misma.

En cambio, las clases se pueden presentar tantas veces como desees dentro de la página.

Ok, ok. Parece que te estoy haciendo líos. Ahí va una pequeña explicación.

Una página bien estructurada, y programada o codificada, suele presentar un código como el siguiente:

Como podrás notar, los ID son únicos, no se repiten dentro de la página, mientras que la clase "titulo" se duplica en las partes superior y de los contenidos.

Sólo resta indicar que, al implementar las estilos o reglas en el código HTML de nuestras páginas, se debe realizar en la forma siguiente:

O bien:

Pasemos a analizar más de cerca a los ID y las Clases...