CSS significa Cascading Style Sheets (hojas de estilo en cascada). Es un lenguaje de diseño gráfico que trabaja en conjunto con lenguajes de marcado como HTML para determinar la presentación y el estilo visual de una página web.
CSS es fundamental en el desarrollo web porque permite separar el contenido (HTML) de la presentación (CSS).
HTML se encarga de la estructura y el contenido (párrafos, títulos, imágenes, enlaces, etc.), funcionando como el esqueleto de la página. CSS, en cambio, se encarga de la apariencia. Consiste en un conjunto de reglas de estilo que le indican al navegador web cómo debe mostrar los elementos HTML.
Una regla CSS típica se compone de:
Selector: Indica a qué elemento(s) HTML se aplicará el estilo (por ejemplo, todos los párrafos, un título específico, etc.).
Bloque de declaraciones: Contiene una o más declaraciones, encerradas entre llaves ({ }).
Declaración: Es un par Propiedad-Valor, donde la propiedad es la característica que se quiere cambiar (ej. color, font-size) y el valor es el nuevo ajuste (ej. red, 16px).
El término «en cascada» (Cascading) se refiere a cómo el navegador decide qué estilos aplicar cuando hay múltiples reglas que podrían afectar al mismo elemento, siguiendo un conjunto de prioridades y reglas de herencia.
CSS sirve para dotar de cualidades visuales y estéticas a una página web. Sin CSS, las páginas web serían solo texto en blanco y negro con la estructura básica de HTML.
Sus funciones principales son:
Estilo visual: Permite controlar elementos como colores (de texto, fondos), tipografía (fuentes, tamaños, estilos), bordes, sombras y más.
Diseño y distribución (Layout): Controla cómo se posicionan los elementos en la pantalla. Esto incluye establecer márgenes (margin), rellenos (padding), anchos y altos, y definir diseños complejos con sistemas como Flexbox o CSS Grid.
Adaptabilidad (Diseño responsive): Permite que el diseño de una página web se adapte automáticamente a diferentes tamaños de pantalla (ordenadores, tabletas, móviles), mejorando la experiencia del usuario en cualquier dispositivo.
Mantenimiento y eficiencia: Al separar el diseño del contenido en archivos CSS externos, se facilita la modificación del estilo de múltiples páginas a la vez (solo se edita un archivo CSS) y se reduce la cantidad de código HTML, lo que puede mejorar la velocidad de carga del sitio.
Interactividad: Permite crear animaciones, transiciones y efectos visuales que enriquecen la interacción del usuario.
