Dominando las hojas de estilo; CSS bajo control (I)
Presentaciones flexibles, precisas y profesionales en sus páginas web
¿Se imagina poder cambiar de golpe la presentación de todo su sitio web? ¿Le gustaría controlar hasta el más mínimo detalle del aspecto de sus páginas: fuentes, estilos, párrafos, maquetación, colores? ¿O generar documentos que se impriman de forma diferente a como se representan en pantalla? Las hojas de estilos en cascada (CSS) le permiten hacer esto y mucho más. Aprenda en éste artículo cómo
Las hojas de estilos en cascada (CSS) actúan como una plantilla que permite controlar la composición y diseño de sus páginas web de manera flexible y precisa. CSS describe la forma de cómo se deben presentar los documentos en pantalla, cómo se deben imprimir e incluso cómo pronunciarlos al ser leídos. Su gran ventaja es que trabajan independientemente del código en HTML, de manera que se puede separar la presentación del contenido, facilitándose así la labor de mantenimiento de grandes sitios web. Más aún, las hojas de estilo proporcionan la posibilidad de crear efectos imposibles de conseguir con el HTML sin recurrir a imágenes GIF o complicados trucos de tablas, nunca del todo satisfactorios en todos los navegadores o que consumen gran ancho banda.
En la actualidad existen dos niveles de CSS, CSS1 y CSS2, y se está trabajando en la especificación de un tercer nivel, CSS3. El primer nivel, CSS1, fue propuesto por el World Wide Web Consortium (www.w3c.org) en 1996 y viene completamente soportado por Netscape Navigator 4.x e Internet Explorer 5.x Por su parte, CSS2 fue recomendado en 1998 como una extensión de CSS1, que todavía está empezando a ser implantada en los navegadores, aunque con suerte variopinta.
Cómo definir estilos
Para aplicar estilos a una página se utilizan las reglas de estilos. Las reglas definen uno o varios aspectos de un elemento de una página HTML, tales como una imagen <IMG>, un párrafo <P> o un campo de entrada de datos <INPUT>. Las hojas de estilo consisten en una agrupación de una o más reglas que se aplican a uno o más documentos HTML.
Cada regla contiene dos elementos:
• Selector: indica el elemento de la página cuyo estilo se desea definir.
• Declaración: explica qué estilo debe aplicarse a dicho elemento.
Ejemplos de tales reglas serían:
H1 { font-family: Arial }
BODY { color: red }
Cualquiera de las etiquetas HTML puede utilizarse como selector. Como puede verse, por su parte, además, cada declaración consta a su vez de dos nuevos elementos:
• Propiedad: indica qué propiedad del elemento desea definirse, como el color, el fondo, el tipo de letra, su tamaño o su peso.
• Valor: asigna el valor que debe tomar la propiedad anterior.
Dentro de una misma declaración pueden insertarse tantas propiedades como se quiera, separadas por “;”. Por ejemplo:
H1 { color: red; font-family: Arial; font-size: 12 pt; font-weight: bold }
Si se desea que varios elementos compartan una misma propiedad, se pueden listar uno detrás de otro, separados por “,”.
H1, H2, H3 { color: rgb(0,0,255) }
También se pueden crear reglas que puedan aplicarse a cualquier elemento de una página, no necesariamente a uno concreto como <BODY> o <P>. La forma de crear estas agrupaciones de reglas es mediante las clases. Una clase se crea nombrándola con un nombre descriptivo precedido de un “.” y seguido de su declaración, que incluirá una o varias propiedades con sus respectivos valores. Por ejemplo, puede crearse la siguiente clase para que el elemento al que se aplique tenga fondo amarillo y un borde negro de un píxel de grosor:
.recuadro { background-color: yellow; border-style: solid; border-width: 1 }
En adelante, esta clase puede aplicarse a cualquier elemento de la página que desee encerrarse en un recuadro amarillo con borde negro, por ejemplo:
<H1 class=“recuadro”>
<P class=“recuadro”>
<IMG class=“recuadro”>
Cómo insertar estilos en una página
Los estilos se añaden a la página utilizando la etiqueta <STYLE>. Existen tres formas de insertarlos: estilos para elementos individuales, estilos para toda una página y estilos aplicables uniformemente a todo un grupo de páginas.
Elementos individuales. Dentro de una sola página HTML, los estilos pueden aplicarse a una palabra, línea, párrafo o un conjunto de elementos, tantas veces como se quiera. Sólo se aplicarán a las porciones de la página donde aparezcan. Por ejemplo, para que un párrafo concreto utilice tipo de letra Arial:
<P style=“font-family: Arial”></P>
Página individual. La definición de estilos para una página individual va encerrada dentro de la etiqueta <HEAD> y entre etiquetas <STYLE>. Constaría de una lista de reglas, tantas como elementos cuyo estilo se desee definir. Por ejemplo, para que el texto de toda la página se escriba en rojo y las cabeceras en Arial:
<HTML>
<HEAD>
<STYLE type=“text/css”>
<!--
H1 { font-family: Arial }
BODY {color: red}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY></HTML>
Los comentarios entre las etiquetas <STYLE>, aunque no son necesarios, suelen incluirse para que los pocos navegadores que hoy día no soporten CSS no muestren en pantalla el texto de las reglas.
Grupo de páginas
Se puede también crear una hoja de estilos separ
Las hojas de estilos en cascada (CSS) actúan como una plantilla que permite controlar la composición y diseño de sus páginas web de manera flexible y precisa. CSS describe la forma de cómo se deben presentar los documentos en pantalla, cómo se deben imprimir e incluso cómo pronunciarlos al ser leídos. Su gran ventaja es que trabajan independientemente del código en HTML, de manera que se puede separar la presentación del contenido, facilitándose así la labor de mantenimiento de grandes sitios web. Más aún, las hojas de estilo proporcionan la posibilidad de crear efectos imposibles de conseguir con el HTML sin recurrir a imágenes GIF o complicados trucos de tablas, nunca del todo satisfactorios en todos los navegadores o que consumen gran ancho banda.
En la actualidad existen dos niveles de CSS, CSS1 y CSS2, y se está trabajando en la especificación de un tercer nivel, CSS3. El primer nivel, CSS1, fue propuesto por el World Wide Web Consortium (www.w3c.org) en 1996 y viene completamente soportado por Netscape Navigator 4.x e Internet Explorer 5.x Por su parte, CSS2 fue recomendado en 1998 como una extensión de CSS1, que todavía está empezando a ser implantada en los navegadores, aunque con suerte variopinta.
Cómo definir estilos
Para aplicar estilos a una página se utilizan las reglas de estilos. Las reglas definen uno o varios aspectos de un elemento de una página HTML, tales como una imagen <IMG>, un párrafo <P> o un campo de entrada de datos <INPUT>. Las hojas de estilo consisten en una agrupación de una o más reglas que se aplican a uno o más documentos HTML.
Cada regla contiene dos elementos:
• Selector: indica el elemento de la página cuyo estilo se desea definir.
• Declaración: explica qué estilo debe aplicarse a dicho elemento.
Ejemplos de tales reglas serían:
H1 { font-family: Arial }
BODY { color: red }
Cualquiera de las etiquetas HTML puede utilizarse como selector. Como puede verse, por su parte, además, cada declaración consta a su vez de dos nuevos elementos:
• Propiedad: indica qué propiedad del elemento desea definirse, como el color, el fondo, el tipo de letra, su tamaño o su peso.
• Valor: asigna el valor que debe tomar la propiedad anterior.
Dentro de una misma declaración pueden insertarse tantas propiedades como se quiera, separadas por “;”. Por ejemplo:
H1 { color: red; font-family: Arial; font-size: 12 pt; font-weight: bold }
Si se desea que varios elementos compartan una misma propiedad, se pueden listar uno detrás de otro, separados por “,”.
H1, H2, H3 { color: rgb(0,0,255) }
También se pueden crear reglas que puedan aplicarse a cualquier elemento de una página, no necesariamente a uno concreto como <BODY> o <P>. La forma de crear estas agrupaciones de reglas es mediante las clases. Una clase se crea nombrándola con un nombre descriptivo precedido de un “.” y seguido de su declaración, que incluirá una o varias propiedades con sus respectivos valores. Por ejemplo, puede crearse la siguiente clase para que el elemento al que se aplique tenga fondo amarillo y un borde negro de un píxel de grosor:
.recuadro { background-color: yellow; border-style: solid; border-width: 1 }
En adelante, esta clase puede aplicarse a cualquier elemento de la página que desee encerrarse en un recuadro amarillo con borde negro, por ejemplo:
<H1 class=“recuadro”>
<P class=“recuadro”>
<IMG class=“recuadro”>
Cómo insertar estilos en una página
Los estilos se añaden a la página utilizando la etiqueta <STYLE>. Existen tres formas de insertarlos: estilos para elementos individuales, estilos para toda una página y estilos aplicables uniformemente a todo un grupo de páginas.
Elementos individuales. Dentro de una sola página HTML, los estilos pueden aplicarse a una palabra, línea, párrafo o un conjunto de elementos, tantas veces como se quiera. Sólo se aplicarán a las porciones de la página donde aparezcan. Por ejemplo, para que un párrafo concreto utilice tipo de letra Arial:
<P style=“font-family: Arial”></P>
Página individual. La definición de estilos para una página individual va encerrada dentro de la etiqueta <HEAD> y entre etiquetas <STYLE>. Constaría de una lista de reglas, tantas como elementos cuyo estilo se desee definir. Por ejemplo, para que el texto de toda la página se escriba en rojo y las cabeceras en Arial:
<HTML>
<HEAD>
<STYLE type=“text/css”>
<!--
H1 { font-family: Arial }
BODY {color: red}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY></HTML>
Los comentarios entre las etiquetas <STYLE>, aunque no son necesarios, suelen incluirse para que los pocos navegadores que hoy día no soporten CSS no muestren en pantalla el texto de las reglas.
Grupo de páginas
Se puede también crear una hoja de estilos separ
