Resumidamente, CSS es una de las tecnologías utilizadas por la mayoría de sitios web para crear páginas web y que tengan un buen aspecto visual. Se complementa con otras tecnologías como HTML y JavaScript. Veamos un poco más sobre CSS:
¿Qué es CSS?
CSS viene de Cascading Style Sheets que en español se traduce como Hojas de Estilo en Cascada.
Básicamente se compone de una serie de reglas de estilo y se le denomina ‘en cascada’ porque esos estilos se aplican de arriba a abajo según un esquema o patrón.
Los estilos CSS se añaden al código HTML de las páginas con la idea de configurar colores, formas, tipos de letras, espacios entre diferentes elementos, colores e imágenes de fondo, márgenes, etc.
CSS fue desarrollado por el World Wide Web Consortium (W3C) en 1996.
En esos años, existían algunas etiquetas HTML como <font> ideadas para modificar fuentes, tamaños y colores de texto. Pero estas etiquetas acababan dando problemas a los diseñadores web, ya que cada vez que querían modificar algunos de estos atributos visuales tenían que modificar muchas zonas del código en diferentes páginas.
CSS permite resolver este problema generando códigos diferentes para HTML y para los diseños que luego se aplican de manera global en todo el sitio web.
Por lo tanto, por sí mismo CSS no puede servir para generar una página web, se necesita de HTML para ello. CSS simplemente aplica reglas de estilo que especifican con qué diseño se van a visualizar los diferentes elementos de la página web.
¿Para qué sirve CSS?
CSS puede ayudarnos en diferentes tareas. Sin CSS las páginas web que visitamos se verían con un formato mucho más simple. Algunas ventajas del uso de CSS son estas:
- Definir un diseño visual para una página web o un sitio web completo.
- Conseguir que el sitio web sea responsive.
- Evitar que los documentos HTML sean demasiado grandes.
- Simplifica la creación de una página web.
- Separar la estructura de la página de su diseño, facilitando así el trabajo del sitio y su diseño.
¿Cómo funciona CSS?
CSS funciona a través de una sintaxis simple que permite trabajar con un conjunto de reglas.
Esta estructura CSS es bastante simple. Básicamente cuenta con un selector y una declaración.
El selector lo que hace, como su nombre indica, es seleccionar alguno de los elementos dentro de la página HTML. Por ejemplo, el selector puede tratarse de un bloque de texto, una imagen, una cabecera, etc.
La declaración puede ser simplemente un color, un tamaño o una posición dentro de la página.
Un ejemplo de CSS sería este:
h2 { color: green; }
En este caso, el selector sería H2 (una cabecera HTML), y la declaración color: green, es decir, color verde.
Lo que haría este código CSS sería, por lo tanto, aplicar el color verde a las cabeceras H2 del documento.
¿Cómo se unen CSS y HTML?
Existen básicamente dos formas de añadir CSS al código HTML.
Puedes añadir el código CSS desde un archivo externo que se carga de manera independientemente al archivo HTML o bien insertar el código CSS dentro del archivo HTML.
Cada una de las dos opciones tiene ventajas e inconvenientes pero, en general, se opta por la opción de cargar todo el CSS de forma externa.
Este método hace que sea más fácil y limpio crear y editar los estilos visuales que se aplican al HTML.
¿Por qué hay que utilizar CSS en un sitio web?
En realidad, no tienes obligación alguna de utilizar CSS con un sitio web. Si diseñas una web utilizando exclusivamente HTML el sitio se seguirá viendo, pero su diseño visual será muy sencillo y básico.
Básicamente existe una gran ventaja que obtienes si utilizas CSS para diseñar sitios web.
CSS permite trabajar de forma separada el código HTML y los atributos de estilo CSS para todo el sitio web, de manera global.
Esto significa que solo tienes que modificar una vez un estilo CSS, por ejemplo el color del texto, para que ese estilo se aplique automáticamente en todas las páginas del sitio, aunque sean cientos o miles, sin tener que editar las páginas una por una.
Otra ventaja del uso de CSS es que se evita la duplicación de estilos en diferentes lugares, haciendo más fácil los cambios.
En general las páginas se van a cargar más rápido, porque es necesario transmitir menos información.
Por último, CSS facilita la creación de diferentes diseños, tanto para testear distintos estilos como para crear presentaciones adaptadas a teléfonos móviles, tablets, etc.
¿Es fácil aprender CSS?
CSS es relativamente sencillo de aprender. Puede ser compleja si no tienes mucha experiencia previa. Si ya tienes conocimientos HTML te será más fácil. En caso contrario, es HTML lo primero que debes aprender antes de introducirte en el terreno CSS.
En general, la curva de aprendizaje es suave. A medida que vas aprendiendo y vas practicando, verás como tu capacidad va aumentado exponencialmente y te permite aprender cada vez más cosas.
