Para todos aquellos que estén familiarizados con el diseño y desarrollo web no les serán desconocidas las siglas CSS (Cascading Style Sheets) pero qué son realmente estas hojas de estilo y lo más importante cómo afectan a las web que se crean en la actualidad, son preguntas a las que intentaremos dar respuesta a lo largo de la siguiente entrada.
¿Qué es una hoja de estilo CSS?
Las hojas de estilo en cascada o CSS, son un simple mecanismo que describe cómo se va a mostrar un documento en la pantalla, cómo se va a imprimir o incluso cómo se debe llevar a cabo su lectura desde dispositivos habilitados para ello. Es decir, son líneas de código HTML o XML que están orientadas a darle un estilo específico a los elementos de un documento HTML, las utilizaremos para personalizar nuestra web (colores, backgrounds, fuentes, enlaces…) con la finalidad de mantener limpio y estructurado el código fuente sin carga de código que dificulte su lectura o modificación.
Las especificaciones de las hojas de estilo han sido creadas por W3C (World Wide Web consortium), organización encargada de definir todos los estándares de la web y creada en 1994 por Tim Berners Lee, con la finalidad de validar el código en HTML y conseguir un buen posicionamiento en buscadores. Asimismo define los estándares que un sitio web debe seguir para alcanzar un diseño responsive.
¿Cómo funcionan?
Como ya hemos comentando CSS se usan para dar estilo a documentos HTML y XML, separando lo que es el contenido propiamente dicho de la presentación del mismo. CSS permitirá a los desarrolladores controlar el estilo y el formato de múltiples páginas Web al mismo tiempo, como se indica en W3C, “cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento”.
Hasta la aparición de las hojas de estilo, los desarrolladores web debían revisar todo el código HTML de cada una de las páginas en las que querían modificar, por pequeña fuera, la presentación de un determinado elemento, lo que conllevaba entre otras cosas una gran pérdida de tiempo y costes. Con el nacimiento de CSS, desaparecen las decenas de líneas repetitivas en el código fuente, necesarias para darle estilo a una determinada etiqueta.
Tipos de hojas de estilo CSS
Existen tres tipos diferentes de hojas de estilo:
- Externas: Están definidas en un documento aparte con extensión .css y que se vincula mediante la etiqueta <link> en la sección <head> del documento html.
- Internas: Se definen en el interior del documento al que se quiere dar estilo utilizando el elemento <style> dentro de la sección <head>, de manera que los estilos sean reconocidos antes de que la página se cargue por completo.
- Inline: Se define el estilo directamente sobre aquellos elementos que lo permiten a través del atributo <style> y dentro de <body>. En este caso se perdería la ventaja que ofrecen los otros tipos de CSS, de hacer un código reutilizable y limpio.
Pero hablar de CSS no es simplemente comprender el manejo de colores, imágenes y transparencias para montar y estructurar páginas web, va más allá, se trata de reducir el tamaño de una web, disminuir el tiempo de carga en los diferentes dispositivos con lo que se puede visualizar una página, reducir el procesamiento en los navegadores así como mejorar la accesibilidad y el orden y legibilidad del código.
¿Cómo afecta a mi web el uso de las hojas de estilo?
Los beneficios de usar CSS son varios, por un lado evitamos hacer archivos demasiados pesados (adiós a la espera en la carga de nuestro sitio web en el navegador, que tan tediosa resulta para el usuario final), ahora definimos el estilo de un sitio entero sin necesidad de hacerlo para cada una de las etiquetas de la web, lo que nos lleva a otra de las ventajas, la reutilización del código y la mejora en la legibilidad, orden y estructuración de los archivos que forman un proyecto de desarrollo web.
Por otro lado trabajamos con estándares, lo que nos garantiza que la mayaría de navegadores disponibles en el mercado van a ajustarse a los mismos, mostrando nuestra página web tal y como la hemos diseñado, presentando al usuario final nuestro “sello” sin cambios en la estructura, colores o maquetación del entorno.
CSS3 y el diseño web responsive
Ajustándonos a la última versión del estándar (CSS3) podemos hacer un diseño responsive de nuestro sitio web, esto no es más que presentar nuestra página acorde a las características del dispositivo en el que se visualiza. Debemos tener en cuenta, que actualmente el usuario final no solo accede al contenido en Internet a través de un ordenador, sino que puede usar un Smartphone, una tablet, una consola o una SmartTV, y cada uno de ellos tiene un tamaño de pantalla concreto y unas características específicas, por lo que una web no tendrá las mismas dimensiones o estructuración según desde donde sea consultada.
Las hojas de estilo nos permiten por tanto, personalizar una web para que su contenido se adapte a las pantallas de los diferentes dispositivos de forma transparente para el usuario, que tendrá la sensación de estar navegando siempre por el mismo sitio independientemente de que acceda con su teléfono móvil, tablet o PC. Esto nos permite crearnos una “marca”, mostrar confianza al usuario final sobre nuestro sitio además de evitar el uso engorroso de las barras para desplazarnos por el contenido y el tiempo de carga en función del dispositivo.
En conclusión, CSS es la tecnología creada con el fin de separar la estructura de la presentación, y mejorar la usabilidad y experiencia de usuario de un sitio web, permitiendo el desarrollo web responsive y disminuyendo el procesamiento y el tiempo de carga, factores que pueden marcar la diferencia entre triunfar o morir en el intento.
958 050 205
