Qué es CSS

22 Aug, 2019   |   de Carlos Herrera   |   Entiende la tecnología

Si te llama la atención el tema de diseño web, entonces necesitas saber qué es CSS. Es una tecnología que simplifica el proceso de creación de una página web. Además, facilita el trabajo en el aspecto estético y visual del blog, logrando la personalización del sitio web a tu gusto. Con el CSS puedes tener varios estilos en una página haciendo el código HTML mucho más limpio y fácil de entender.

Las siglas CSS son las siglas de Cascading Style Sheets, en español hojas de estilo en cascada. Con el CSS puedes separar la estructura de la página de la presentación del sitio web.

El organismo W3C (World Wide Web Consortium) fue el encargado de crear todos los estándares relacionados con el Internet. Ellos propusieron la creación de un lenguaje de hojas de estilo específico para el lenguaje HTML. Así fue cómo esta tecnología se convirtió en un estándar para presentar los documentos web en los distintos navegadores.

Las siglas HTML corresponden a HyperText Markup Language que significa lenguaje de marcas de hipertexto. Es el lenguaje base para crear cualquier página web en el mundo y el mismo se integra con el CCS.

¿Qué es CSS?

Figura 1. Es importante que conozcas qué es CSS y la importancia que tiene en el diseño de una página web.

Es un lenguaje que describe el estilo de un documento HTML y cómo deben mostrarse los elementos en los navegadores. El CSS es una tecnología que permite crear páginas web de una manera más sencilla. Ya que puedes aplicar estilos (colores, formas, márgenes, etc) a uno o varios documentos web de forma masiva.

Se le denomina estilos en cascada porque se aplican de arriba a abajo siguiendo un patrón llamado herencia. En este sentido, el CSS utiliza el concepto de separación de contenido y de presentación. Por ello, todos los aspectos relacionados con el estilo se encuentren en un documento CSS independiente al documento HTML.

¿Cómo se relaciona el CSS con las páginas web?

El CSS unifica el aspecto visual en un solo documento, separando así el código HTML de la parte estética. Esto conlleva una serie de ventajas, entre las que se encuentran:

1. Facilidad de modificación

Si necesitas realizar cambios visuales se hace en un sólo lugar y no tienes que editar todos los documentos HTML en cuestión por separado.

2. Ahorro de esfuerzo

Se reduce la duplicación de estilos en diferentes lugares, por lo que es más fácil de organizar y hacer cambios en menor tiempo. Además, la tecnología CSS permite que la página web funcione de manera óptima.

3. Visualización de la página en diferentes equipos

Es más fácil desarrollar versiones diferentes de páginas para todos los tipos de dispositivos como: tabletas, Smartphone o dispositivos móviles y computadoras.

¿Cómo influye el CCS en la velocidad de carga?

Figura 2. Es aconsejable reducir al máximo posible la cantidad de archivos CSS para evitar peticiones HTTP y conexiones innecesarias al servidor.

El propósito de cualquier blog es lograr la conversión y el modo de componer y estructurar contenidos de calidad. En este sentido, el aspecto visual de las páginas web usualmente está basado en hojas de estilo.

Por eso, mientras más grande y compleja sea la estructura de un sitio web mayor será la dependencia de las llamadas hojas de estilo. Por tanto, no es de extrañar que los tiempos de carga aumenten a medida que lo hace el documento CSS.

Por esta razón, el CCS influye notablemente en la velocidad de carga de tu página web. Por ejemplo, es común, cuando estás trabajando con el código HTML, agregar varios espacios entre sentencias y saltos de líneas. Luego, mientras más espacios agregas, el archivo se hace más pesado, y por consiguiente la página tardará más en cargar.

Por ello, muchos desarrolladores web recomiendan separar el aspecto visual usando el CCS de la estructura del documento HTML. Esto disminuye el tamaño del archivo y por ende, los documentos web se van a cargar más rápido en los navegadores.

En este sentido, es aconsejable reducir al máximo posible la cantidad de archivos CSS para evitar peticiones HTTP (Hypertext Transfer Protocol), y conexiones innecesarias al servidor. Además, el ahorro en el ancho de banda es notable, ya que la hoja de estilo se almacena en caché después de la primera solicitud. También, puedes mejorar aún más la carga de la página si comprimes el código CSS. Ello utilizando herramientas en líneas para comprimir los archivos CSS, como CSS minifier o el CSS Compressor.

¿Cómo funciona el CSS?

El CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo y un valor separados por dos puntos. A continuación explico cada uno de estos elementos:

Selector

Figura 3. El CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados.

El selector especifica que elementos HTML que van a estar afectados por esa declaración. Hace el enlace entre la estructura del documento y la regla estética en la hoja de estilo.

Declaración

Aquí se coloca la información referente al estilo que va a indicar cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

Atributo y Valor

Dentro de la declaración, el Atributo define la interpretación del elemento asignándole un cierto Valor. Que puede ser un color, alineación, tipo de fuente, tamaño, es decir, se especifica qué aspecto del selector va a tomar.

Ejemplo:

h1 {color: blue;}, donde h1 es el selector, {color: blue;} es la declaración, color es el atributo y blue (azul) es el valor.

Entonces el usuario entra al sitio y el navegador web muestra el documento, para ello, ocurren dos procesos:

1. El navegador convierte el lenguaje de marcado y el CSS en el DOM (Modelo de Objetos del Documento). El DOM representa el documento en la memoria del computador y combina el contenido del documento con su estilo.

2. El navegador muestra el contenido del documento.

Puedes implementar la hoja de estilos en cascada de dos manera, el estilo interno que consiste en colocar el código CSS en el documento HTML. La otra manera se conoce como estilo externo, es el más usado por los desarrolladores. El mismo consiste en hacer un enlace a un archivo .CSS, este estilo mejora los tiempos de carga de la página web.

¿Cuál es el principal uso del CSS en la personalización la plantilla de un CMS?

Figura 4. Con el CSS puedes trabajar el aspecto de la personalización de tu plantilla según tus prorpias necesidades.

Combinar el buen manejo de tu plantilla con el conocimiento de códigos básicos para web te permite hacer páginas totalmente profesionales. Ello sin limitación ninguna y lo mejor de todo lo puedes hacer tú mismo de forma rápida. Además, con el CSS puedes almacenar una cantidad de estilos de presentación para una web en un sólo archivo.

Aunque tu plantilla o template sea la mejor del mundo, a veces existe la necesidad de modificar ciertos aspectos. Allí es cuando entra en acción el código CSS para darte una mano.

Con el CSS puedes trabajar el aspecto de la personalización de tu plantilla según tus prorpias necesidades. A partir de ella, puedes definir tus popios estilos, haciendo las correspondientes declaraciones en CCS. Luego, con pequeñas líneas de código, puedes modificar la apariencia de tu página para darle un aspecto personalizado.

En conclusión, al conocer qué es CSS vas a comprender la importancia de esta tecnología. Entediendo que son conjunto de reglas que rige al CSS, podrás realizar cambios en las plantillas de los CMS. Aunque tu plantilla o template sea la mejor del mundo, a veces existe la necesidad de ajustarciertos aspectos.

En Bloguero Pro tenemos información acorde a tu necesidad particular. ¿Quieres hacer tu blog, crear tu contenido, conseguir lectores, monetizar tu blog o entender la tecnología relacionada con la web? ¿Y aprovechar los recursos que te ofrecemos? Entonces, no dejes de visitar Sobre Nosotros, donde puedes acceder a todas nuestras categorías.

Pulsa el botón que indica la flecha para navegar en nuestra categoría Entiende la Tecnología, donde puedes aprender a usar las técnicas y herramientas necesarias para crear y gestionar tu blog.

Carlos Herrera

Ingeniero de Sistemas, Profesor Universitario, Copywriter.

Suscríbete al newsletter de Bloguero Pro

Regístrate con tu email para recibir novedades, noticias y consejos.

* No compartimos tu información personal con nadie. Al registrarte, aceptarás recibir ofertas, promociones y otros mensajes comerciales de Bloguero Pro. Puedes cancelar tu suscripción en cualquier momento.

Comentarios