Darle vida a un documento HTML requiere un segundo lenguaje que se encargue de los colores, las tipografías y el comportamiento visual de cada elemento. Ese lenguaje es CSS (Cascading Style Sheets), y comprender su sintaxis básica resulta fundamental para cualquier persona que diseñe o desarrolle interfaces web.
¿Qué es CSS y por qué lo necesitamos?
CSS es un lenguaje de estilos que complementa a HTML. Si HTML representa los huesos de una página —la estructura—, CSS es todo lo que se coloca encima para que el resultado sea visualmente atractivo [00:18]. Gracias a él podemos configurar colores, tamaños de fuente, transiciones al pasar el mouse sobre un elemento y muchos otros detalles que mejoran la experiencia del usuario.
Un punto clave es que CSS funciona como un lenguaje basado en reglas [01:10]. No utiliza etiquetas de apertura y cierre como HTML; en su lugar, se indica el elemento que se quiere afectar y, dentro de llaves, se definen las propiedades y sus valores. Por ejemplo:
css
h1 {
color: red;
font-size: 10px;
}
En este bloque se está aplicando un color rojo y un tamaño de fuente de diez píxeles a todos los elementos h1 del documento.
¿Cómo se estructura la sintaxis de CSS?
Las propiedades que escribimos dentro de las llaves no son inventadas: debemos consultar la documentación oficial para conocer qué propiedades existen y qué valores acepta cada una [01:30]. Con la práctica, las más comunes se memorizan de forma natural.
¿Qué propiedades son las más utilizadas?
Entre las propiedades frecuentes encontramos [02:30]:
- color: define el color del texto.
- font-size: establece el tamaño de la fuente.
- background-color: controla el color de relleno o fondo del elemento.
Cada propiedad acepta distintos tipos de valores. En tipografía, por ejemplo, podemos ajustar el tamaño, el interlineado (line-height) y el espaciado entre caracteres (letter-spacing) [02:10].
¿Qué relación tienen los encabezados HTML con un sistema de diseño?
HTML ofrece seis etiquetas de encabezado, desde h1 hasta h6. Esto se asemeja a mantener un sistema de diseño en Figma con seis estilos de texto donde cada nivel cambia su tamaño a medida que el número aumenta [01:50]. Reconocer esta equivalencia ayuda a diseñadores y diseñadoras a comunicar decisiones tipográficas con mayor precisión al equipo de desarrollo.
¿Cómo se enlaza CSS con un documento HTML?
Para que los estilos se apliquen, es necesario indicarle al HTML dónde encontrarlos. Esto se logra con la etiqueta <link>, que se coloca dentro del <head> del documento [02:50]:
html
<link rel="stylesheet" href="style.css">
- El atributo href señala la ubicación del archivo CSS.
- El atributo rel indica que se trata de una stylesheet (hoja de estilos).
Esta etiqueta no tiene cierre, igual que otras etiquetas autocontenidas de HTML. Con ella, el navegador sabe que debe buscar ese archivo y aplicar sus reglas a los elementos correspondientes [03:15].
¿Por qué los estilos se ven diferentes en cada navegador?
No solo existe Chrome; también están Firefox, Opera y Safari, y cada uno pertenece a una compañía distinta [03:35]. Uno de los problemas más habituales son los estilos por defecto: cada navegador aplica su propia apariencia a elementos como botones, inputs y selectores. Un botón en Chrome luce diferente a uno en Firefox aunque no se le haya aplicado ningún estilo personalizado [03:55]. Como diseñadores, es importante trabajar junto al equipo de ingeniería para detectar y resolver estas diferencias.
Al combinar HTML y CSS, el sitio web pasa de ser una estructura básica con tipografía genérica a un diseño con layout definido, fuentes seleccionadas y una apariencia coherente [04:20]. Lo que queda pendiente —traer información dinámica desde un servidor— es tarea de JavaScript.
Comprender CSS otorga a quienes diseñan las herramientas para verificar la implementación de sus propuestas y cuidar la experiencia completa del usuario en el sitio web [04:55]. Si alguna propiedad o concepto no quedó claro, comparte tu duda en los aportes para resolverla juntos.
