“Hojas de Estilo en Cascada (Cascading Style Sheets) es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, cómo se va a imprimir o incluso cómo va a ser pronunciada la información”. Esta es la definición de hoja de estilos (o CSS) que ofrece la W3C, el consorcio internacional que trabaja para desarrollar los estándares de la web, incluidos CSS, HTML y XML. En ella se encuentran dos detalles importantes:
- Es simple: el desarrollo de este estándar fue concebido para facilitar la labor de los ediseñadores de páginas wb que necesitaban aislar el contenido de las páginas de la forma en que se muestra en pantalla. Este principio hay que mantenerlo a la hora de definir la estructura de una hoja de estilos; debe ser simple ante todo.
- Dice cómo se muestra el documento: la definición de estilos, que puede ser, por ejemplo, letra negrita de tamaño 14 para los títulos H1, va ligada al contenido de la página web. Cada línea de código que forma la hoja de estilos CSS hace referencia a un elemento del contenido HTML de la página web, en este caso un título H1, que luego es mostrado por pantalla con un cierto diseño. Hay que procurar entonces no hacer declaraciones de diseño que luego no se usen en los documentos, ya que se estaría desplazando información al ordenador del cliente que luego no va a ser utilizada.
Estructura simple y declaraciones oportunas serán los dos grandes principios que rigen la creación de una hoja de estilos eficaz. La velocidad de carga de las páginas web depende de la cantidad de datos que tienen que \»pedir\» al servidor y, cuantos menos datos, mayor velocidad. Por otra parte, aumentando la velocidad de carga de los datos se mejora también el SEO de la página, siendo posicionada por los buscadores en lugares más altos. Y este menor tamaño también permite al servidor de páginas web disminuir su carga de trabajo.
Características principales de las hojas de estilo CSS
Otra de las características principales de CSS es la herencia de los estilos que se definen. Con ella se consigue que los elementos que se encuentran contenidos en otros elementos, como un párrafo que está dentro de una capa, hereden las propiedades de su contenedor. Por ello, si se tiene claro que, por ejemplo, el tipo de letra que se va a usar en el documento es Arial, no es necesario indicarlo en cada elemento que se muestre, sino que será suficiente con hacerlo en la declaración del diseño del elemento que contiene toda la página.
¿Y qué pasa si se definen dos estilos diferentes para un elemento que está contenido en otro? ¿Cómo se dirime la aplicación de dos estilos? En este caso se aplica el del elemento contenido. Aparece también otro de los conceptos importantes: la especificidad. Un estilo es más específico del elemento mientras mejor lo identifica, mientras menos genérico es y ese estilo será aplicado al elemento.
Por último, al usar un archivo separado con los estilos del documento, se permite que el navegador cachee esa información y no haga más peticiones si esta no cambia. Se procurará agrupar las definiciones de estilos en un solo archivo para reducir el número de peticiones al servidor y permitir este almacenamiento en caché, que redundará en una mejor velocidad de carga de las páginas de todo el sitio web.
Un servidor web más rápido y un uso del ancho de banda eficiente son las razones para disminuir el tamaño de las hojas de estilo CSS y reducir el número de peticiones a su servidor. Con las explicaciones expuestas, se conseguirán a la vez estos dos objetivos.
Si estás interesado en esta temática, no dejes de ver nuestra guía rápida de diseño web.
