CSS
Imagina navegar por internet en 1994. Todo era un mar de fondos grises, texto negro en Times New Roman y enlaces azules crudos. Un paisaje verdaderamente hostil para la vista.
HTML fue diseñado para estructurar información, no para embellecerla. Cuando los desarrolladores intentaron hacer que la web se viera decente, recurrieron a atrocidades como usar tablas de HTML para el diseño visual. Algo tenía que cambiar.
¿Qué es exactamente CSS?
CSS significa Cascading Style Sheets, o Hojas de Estilo en Cascada. Es el lenguaje que dicta cómo se presentan los elementos HTML en la pantalla del usuario.
Si construyes una casa, HTML representa los ladrillos y las vigas. CSS es la pintura, el diseño de interiores y la sana decisión de no poner alfombra en el baño. Separa el contenido de la presentación, devolviendo la cordura al desarrollo.
Una evolución necesaria
En 1994, Håkon Wium Lie propuso CSS para salvar a la web del caos del diseño basado en etiquetas de texto. La primera versión era primitiva, pero sentó las bases fundamentales de la separación de responsabilidades en el código.
Hoy disfrutamos del poder de CSS3. Ya no tenemos que recortar imágenes en Photoshop para simular bordes redondeados. Tenemos módulos como Flexbox y Grid que manejan estructuras complejas sin requerir trucos oscuros.
Cuatro formas de implementar CSS
Para que el navegador entienda y aplique tus estilos, debes vincularlos a tu documento HTML. Existen cuatro caminos principales para lograr esto, cada uno con su propio nivel de escalabilidad.
1. Estilos en línea (Inline)
Es la forma más directa, pero también la más difícil de mantener. Consiste en escribir el código CSS directamente dentro de la etiqueta HTML usando el atributo style.
<h1 style="color: blue; font-size: 24px;">Hola, mundo del diseño</h1>Úsalo solo para pruebas rápidas o correcciones de máxima urgencia. Si construyes un sitio entero con esta técnica, te odiarás a ti mismo en el futuro cuando necesites cambiar un color.
2. Etiqueta Style (Interno)
Aquí agrupamos los estilos en la cabecera del documento HTML, específicamente dentro de la etiqueta <style>. Es una solución útil para proyectos o pruebas de una sola página.
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>Mejora la organización respecto al método en línea, pero seguimos mezclando la estructura y el diseño gráfico dentro del mismo archivo.
3. Hoja de estilos externa
El estándar absoluto de la industria. Escribes todo tu CSS en un archivo independiente con extensión .css y lo vinculas a tu HTML usando la etiqueta <link>.
<head>
<link rel="stylesheet" href="estilos.css">
</head>Esto permite que múltiples páginas consuman el mismo archivo. Si decides cambiar el color principal de tu marca, solo editas una línea en tu archivo CSS y todo el sitio se actualiza.
4. Content Delivery Network (CDN)
Un CDN te permite cargar archivos CSS alojados en servidores externos y optimizados. Es el método que utilizas cuando implementas frameworks modernos como Bootstrap o Tailwind.
<head>
<link rel="stylesheet" href="https://cdn.ejemplo.com/framework.min.css">
</head>Acelera enormemente los tiempos de carga. El archivo suele estar almacenado en la caché del navegador del usuario y se sirve desde el nodo más cercano a su ubicación física.
Siguientes pasos
Ya conoces la historia y las reglas de vinculación. Las bases teóricas están cubiertas y listas para escalar. En las siguientes lecciones comenzaremos a picar codigo e implementar nuestros estilos.