Definición:
CSS (cascading style sheets), conocido en español como hojas de estilo en cascada, es una poderosa herramienta que se integra con HTML para proporcionar a los desarrolladores y usuarios un control avanzado sobre la presentación visual de las páginas web. CSS permite separar el contenido de la presentación, facilitando la creación de diseños consistentes y atractivos.
Con CSS, los diseñadores pueden definir cómo deben mostrarse los distintos elementos de una página, como los encabezados, enlaces, imágenes y tablas. Además, estas hojas de estilo pueden aplicarse de manera global a múltiples páginas, lo que simplifica el mantenimiento y la actualización del diseño de un sitio web completo. Esta capacidad de optimización también contribuye a mejorar el posicionamiento en buscadores (SEO), ya que permite un código más limpio y estructurado.
Origen y evolución de CSS
El origen de CSS (Cascading Style Sheets) se remonta a 1994, cuando Håkon Wium Lie, trabajando en el CERN, propuso la idea de un lenguaje que permitiera separar el contenido de la presentación en documentos web. En esa época, el HTML se utilizaba principalmente para estructurar contenido, sin muchas capacidades de diseño visual. Lie se unió a Bert Bos, quien también estaba explorando soluciones similares, y juntos refinaron la propuesta inicial. Su objetivo era crear un sistema que permitiera a los desarrolladores aplicar estilos de manera más eficiente y flexible. En 1996, el World Wide Web Consortium (W3C) publicó la primera especificación oficial de CSS, conocida como CSS1, marcando el inicio de una nueva era en el diseño web.
Desde su creación, CSS ha transformado el diseño y desarrollo web. Esta evolución ha facilitado la separación del contenido y la presentación, mejorando tanto la eficiencia del desarrollo como la experiencia del usuario. A continuación, se detalla la evolución de CSS a través de sus principales versiones y características.
- CSS1 (1996)
- Introducción: CSS1 fue la primera versión oficial, publicada por el W3C en diciembre de 1996.
- Características: Proporcionaba capacidades básicas de estilo, como fuentes, colores, y espaciado. Permitía a los desarrolladores separar el contenido del diseño visual.
- CSS2 (1998)
- Mejoras: Introducido en mayo de 1998, CSS2 amplió significativamente las capacidades de CSS1.
- Nuevas características: Añadió soporte para hojas de estilo para diferentes medios (impresión, pantalla, etc.), posicionamiento absoluto y relativo, y estilos para tablas.
- Accesibilidad: Mejoras en la accesibilidad y en la presentación para diferentes dispositivos.
- CSS2.1 (2011)
- Revisión: CSS2.1 fue una revisión de CSS2, que corrigió errores y eliminó características poco utilizadas.
- Estándar estable: Se convirtió en el estándar estable, siendo ampliamente adoptado por los navegadores.
- CSS3 (A partir de 2011)
- Módulos: CSS3 introdujo un enfoque modular, permitiendo que diferentes partes del estándar evolucionaran a diferentes ritmos.
- Nuevas capacidades: Incluyó características avanzadas como sombras, bordes redondeados, gradientes, transiciones, animaciones, y soporte para fuentes web.
- Responsive design: Media queries, una parte crucial de CSS3, permitieron el diseño responsivo, adaptando el diseño a diferentes tamaños de pantalla.
- CSS4 (En desarrollo)
- Estado: Aunque no existe un «CSS4» oficial como tal, el término se utiliza para referirse a las nuevas características que están siendo desarrolladas y añadidas a CSS.
- Características emergentes: Incluyen mejoras en selectores, capacidades de layout avanzadas como grid y flexbox, y nuevas funciones para animaciones y efectos visuales.
Etiquetas de estilo HTML
Antes de la introducción de CSS, el formato de documentos HTML era considerado tedioso y complejo debido a la necesidad de incluir atributos de estilo directamente en el código HTML. Esto significaba que las etiquetas de estilo requerían descripciones detalladas y repetitivas para definir elementos como:
- Colores de las fuentes: especificar cada color individualmente en cada elemento.
- Estilos de fondo: definir fondos para secciones específicas, lo cual era un proceso repetitivo.
- Alineación de elementos: alinear texto e imágenes requería múltiples atributos en cada etiqueta.
- Bordes: configurar bordes para tablas y otros elementos era laborioso.
- Tamaños: ajustar el tamaño de texto e imágenes en cada caso particular.
El término «cascada» en CSS se refiere a la capacidad de aplicar múltiples hojas de estilo a una misma página web. Esto permite que diferentes estilos se combinen de manera jerárquica, donde las reglas más específicas pueden sobrescribir las generales. CSS fue desarrollado por el Consorcio World Wide Web (W3C), una organización internacional que establece estándares para la web.
Formatos CSS
CSS es versátil y se utiliza para definir el formato de varios tipos de documentos, incluyendo:
- Lenguaje de marcado de hipertexto (HTML): el estándar básico para la creación de páginas web.
- Lenguaje de marcado de hipertexto extensible (XHTML): una versión más estricta de HTML que sigue las reglas de XML.
- Lenguaje de marcado extensible (XML): un lenguaje de marcado general que permite definir documentos con una estructura personalizada.
- Gráfico vectorial escalable (SVG): un formato para gráficos vectoriales que permite imágenes escalables sin pérdida de calidad.
- Lenguaje de interfaz de usuario XML (XUL): un lenguaje utilizado principalmente por aplicaciones de Mozilla para definir interfaces de usuario.
Con CSS, los desarrolladores pueden crear sitios web más dinámicos y accesibles, mejorando tanto la experiencia del usuario como la eficiencia del desarrollo web.
Ejemplos de CSS
<code class="language-css">body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
}