CSS, Hojas de Estilo en Cascada
por
Baquia Inteligencia
24/10/2002,
00:00
GMT+1
Las siglas CCS son la abreviatura de Cascading Style Sheets, término
generalmente conocido en castellano como Hojas de Estilo, o bien Hojas de Estilo
en Cascada.
Se trata de un método para especificar la apariencia y configuración
de un sitio web. El programador establece en la Hoja de Estilo unas reglas (tipo
de letra, tamaño, color, alineación del texto, márgenes,
separación, color de los hipervínculos leídos y no leídos,
etc.) que se aplicarán automáticamente a las distintas partes
del contenido (menús, encabezados, textos, etc.) al renovar éste,
sin necesidad de especificar dichas reglas en el código HTML cada vez
que se introduce contenido nuevo.
La expresión Cascading (en Cascada) se refiere al establecimiento
de una sucesión de dependencias a la hora de aplicar reglas de estilo en caso
de que varias de estas reglas confluyan en el mismo elemento de la página.
Las reglas aparecen en orden anidado, de manera que cada regla hereda las propiedades de la anterior,
por ejemplo:
P {color: white ! important}
/* increased weight */
P {color: black} /* normal weight */
Configuración básica
A la hora de utilizar CSS, existen dos alternativas principales:
- Es posible crear una Hoja de Estilo con indicaciones específicas
para cada página; por ejemplo:
- O bien crear una única Hoja de Estilo, consistente en un
archivo de texto ejecutable, a la que todas las páginas estén
enlazadas. El navegador descarga una sola vez el archivo con la extensión
".css" y ejecuta sus indicaciones al navegar por todo el site, por
ejemplo:
Donde,
- LINK: indica al navegador que existe un enlace en esa página.
- rel= "stylesheet", indica al navegador que el objeto enlazado
está relacionado con la Hoja de Estilo de la página.
- href="__", señala donde se encuentra la Hoja de Estilo.
- type="text/css", indica al navegador que el documento al
que está accediendo actuará como CSS.
Sólo con introducir el comando anterior dentro del código fuente,
el website completo se configurará según las indicaciones especificadas
en la Hoja de Estilo. En ésta, se introducen os denominados comandos
inline, que precisan la configuración de cada uno de los elementos
de la página. Por ejemplo, para configurar el texto y la apariencia de
los hipervínculos:
Ventajas de usar CCS
La principal ventaja de utilizar las CSS es la de "limpiar" o
"aligerar" el código HTML con que se suelen programar la
mayoría de las páginas web. Al incluir en ellas las especificaciones
de los distintos elementos que configuran la página, se "libera
espacio" en el código HTML para el resto de contenido, lo que facilita
insertar más contenido dinámico.
- Con el uso de la CSS se evita emplear una gran cantidad de código
HTML para definir el estilo y la configuración de cada página,
evitando insertar tablas con menús que se repiten en cada página.
Además, al depurar el código HTML (uno de los factores que influyen
en la velocidad de descarga de las páginas), se logra el efecto de
mayor velocidad de descarga en las mismas. Puede aligerarse el peso
de cada página hasta en un 50%, resultando un menor peso del site en
conjunto.
- También las CSS introducen mayor agilidad en la producción,
ya que permiten dividir la creación de contenido (incluida en
el HTML) y su presentación (incluida en la hoja de estilo).
De este modo, en sitios dinámicos donde el contenido es actualizado
periódicamente, sólo es necesario modificar la parte de HTML
que configura dicho contenido, pero no el conjunto de instrucciones que configuran
la apariencia del site, ya definidas en la Hoja de Estilo.
- Igualmente, si se desea modificar todo el aspecto del sitio web, únicamente
hay que modificar el archivo CSS. Con el uso de CSS se gana además
en coherencia en la presentación del aspecto general, evitando
errores de presentación.
