CSS indirectas dentro del mismo documento

Este tipo de hojas de estilo se aplican cuando queremos que los estilos de las CSS se apliquen de una forma global a todas las etiquetas de un documento.

Por ejemplo, queremos que todo el cuerpo del documento, el “body", tenga un determinado tipo de letra, que los párrafos tengan un color determinado, que las cabeceras tengan un tamaño igual entre ellas, etc. Para conseguir estos propósitos, las CSS indirectas son ideales.

Para aplicar una CSS indirecta dentro del mismo documento, utilizaremos la etiqueta <style>. La colocaremos en la cabecera del documento. Entre esta etiqueta y su cierre (</style>) escribiremos todos los estilos que queramos definir en el documento.

El código de la estructura básica de este tipo de CSS sería el siguiente:

Observa como a la etiqueta “style" le hemos puesto el atributo type=“text/css". Indicar este atributo no es necesario, pero sí muy recomendable, pues le está indicando al navegador el tipo de sintaxis que usa la hoja de estilo.

Observa como hemos puesto los estilos como si fueran comentarios. Anteriormente los estilos se escribían así para ocultar las hojas de estilo a los navegadores que no las reconocieran. Actualmente, todos los navegadores las reconocen, así que escribirlo de esta manera es innecesario.

Formas de definir clases

A continuación vamos a explicarte como definir los estilos de los tags dentro de la etiqueta “style". Existen varias formas:

Si queremos definir un estilo, a todas las etiquetas de un determinado tipo que se encuentren en el documento, lo escribiremos de la siguiente manera:

Observa como primero indicamos la etiqueta a la que vamos a aplicar el estilo y después le indicamos el tipo de estilo que va a tomar. Éste va encerrado entre los signos { y }. Todo ello entre las etiquetas <style>. Observa el siguiente código:

Este código aplicado a un texto haría que el color de fondo del documento fuera blanco, que todos los párrafos tuvieran la fuente “courier new" de tamaño 10 y de color negro y que los textos dentro de etiquetas <h4> fueran de color rojo, estuvieran centrados y su tipo de letra fuera “verdana". En el siguiente enlace tienes la muestra de cómo quedaría este texto: Ejemplo de muestra. Y a continuación tienes el código del mismo:

Otra forma de aplicar un estilo es mediante una clase. Las clases se definen también dentro de la etiqueta “style". Se escribe de la siguiente manera. Observa el código:

Como vemos, tenemos que escribir un punto, seguido del nombre de la clase. Para aplicarla, sólo deberemos incluirla dentro de la etiqueta que queramos transformar. Observa el siguiente ejemplo:

Y ahora vamos a aplicarle el estilo a un párrafo. En el siguiente enlace tienes la muestra de cómo quedaría este texto: Ejemplo de muestra. Y a continuación tienes el código del mismo:

Si queremos restringir el uso de un estilo a un elemento de un tipo determinado, podemos definirlo de la siguiente manera:

“X" será la etiqueta a la que queramos aplicar el estilo. Lo que estamos haciendo con esta forma de aplicar el estilo es limitar esa clase sólo a las etiquetas que se llamen "X". Si pusiéramos esta clase en una etiqueta llamada “Y" no funcionaría.

Por ejemplo, si escribimos esta clase: “p.clase1 {color:#FF0000;text-align:center;}", ese estilo sólo se aplicaría a los párrafos que llevarán esa clase, pero no a ningún otro tipo de etiquetas.

Esta es la forma de definir el estilo. Para aplicarlo lo haremos de la misma forma que aplicábamos los estilos por clases. En el caso anterior sería:

Otra forma de definir un estilo es a través del símbolo “#" y del atributo “id". Esta forma de aplicar un estilo es útil para definir un estilo particular.

Este estilo se escribiría de la siguiente manera:

Y para aplicarlo debe usarse un tag con el atributo "id" cuyo valor sea el nombre del estilo. En el siguiente enlace tienes la muestra de cómo quedaría este texto: Ejemplo de muestra. Y a continuación tienes el código del mismo:

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.