8 min CSS

¿Qué es CSS?

Recuerdas la landing de Café Estelar que hiciste en la sección de HTML? Era funcional, tenía toda la estructura, pero seamos honestos: era fea. Texto negro sobre fondo blanco, sin espaciado, sin personalidad. Eso es HTML sin CSS. Un esqueleto sin piel.

CSS (Cascading Style Sheets) es el lenguaje que le dice al navegador cómo se ve todo. Colores, tipografía, espaciado, layout, animaciones, responsive — todo eso es CSS. Si HTML es la estructura de un edificio, CSS es la arquitectura interior, la pintura y el mobiliario.

¿Cómo funciona CSS?

CSS funciona con un concepto simple: seleccionas un elemento HTML y le aplicas estilos. Así:

h1 {
    color: #1572B6;
    font-size: 2.5rem;
    font-weight: 700;
}

Esto dice: "todos los <h1> del documento serán azules, de tamaño 2.5rem y negrita". Tres partes:

Selector (h1): qué elemento quieres estilizar.
Propiedad (color, font-size): qué aspecto quieres cambiar.
Valor (#1572B6, 2.5rem): cómo quieres que se vea.

Tres formas de añadir CSS

Hay tres maneras de meter CSS en tu HTML. Solo una es la correcta para proyectos reales.

1. CSS inline (evitar)

Directamente en el atributo style del elemento:

<!-- ❌ No hagas esto en proyectos reales -->
<h1 style="color: crimson; font-size: 2rem;">Café Estelar</h1>
<p style="color: #555; line-height: 1.6;">La mejor cafetería galáctica.</p>

El problema: si tienes 50 párrafos, tienes que repetir el estilo en cada uno. Imposible de mantener.

2. CSS interno (para prototipos rápidos)

Dentro de una etiqueta <style> en el <head>:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Café Estelar</title>
    <style>
        h1 {
            color: crimson;
            font-size: 2.5rem;
        }
        p {
            color: #333;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Café Estelar</h1>
    <p>Cafetería de gatos en gravedad cero.</p>
</body>
</html>

Mejor que inline porque centralizas los estilos, pero sigue acoplado al HTML. Si tienes 10 páginas, tienes que copiar el bloque <style> en cada una.

3. CSS externo (la forma correcta)

Un archivo .css separado, enlazado con <link>:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Café Estelar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Café Estelar</h1>
    <p>Cafetería de gatos en gravedad cero.</p>
</body>
</html>

h1 {
    color: crimson;
    font-size: 2.5rem;
    margin-block-end: 0.5rem;
}

p {
    color: #333;
    line-height: 1.6;
    max-width: 65ch;
}

Esto es lo que vas a usar siempre. Un archivo CSS, muchas páginas HTML que lo enlazan. Cambias el CSS una vez, cambia en todas partes.

La etiqueta <link> va en el <head>. El atributo rel="stylesheet" le dice al navegador que es una hoja de estilos. El href es la ruta al archivo CSS.

Tu primer archivo CSS real

Vamos a darle vida a la landing de una tienda de vinilos. Crea estos dos archivos en la misma carpeta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Vinyl Paradise — Discos que no encontrarás en Spotify</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Vinyl Paradise</h1>
        <p>Discos que no encontrarás en Spotify.</p>
    </header>
    <main>
        <section>
            <h2>Novedades de la semana</h2>
            <ul>
                <li>Khruangbin — A La Sala (LP)</li>
                <li>Fontaines D.C. — Romance (LP edición limitada)</li>
                <li>Floating Points — Cascade (12" single)</li>
            </ul>
        </section>
    </main>
</body>
</html>

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: #0a0a0b;
    color: #e0e0e0;
    line-height: 1.6;
    padding: 2rem;
}

header {
    text-align: center;
    padding-block: 3rem;
}

h1 {
    font-size: 3rem;
    color: #ff6b35;
    letter-spacing: -0.02em;
}

header p {
    color: #999;
    font-size: 1.2rem;
    margin-block-start: 0.5rem;
}

h2 {
    font-size: 1.5rem;
    color: #ff6b35;
    margin-block-end: 1rem;
    border-bottom: 2px solid #222;
    padding-block-end: 0.5rem;
}

ul {
    list-style: none;
}

li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #1a1a1a;
    font-size: 1.1rem;
}

li:hover {
    color: #ff6b35;
}

Abre index.html en el navegador. Has pasado de una página blanca con texto negro a una tienda de vinilos con personalidad: fondo oscuro, color naranja de acento, tipografía limpia y hover en los elementos. Todo con CSS.

Comentarios en CSS

Los comentarios en CSS usan /* */. No hay comentarios de línea como // (eso es de JavaScript):

/* Este es un comentario en CSS */
h1 {
    color: crimson; /* Color del título principal */
}

/*
  Comentario
  de varias
  líneas
*/

¿Qué es la "cascada"?

La "C" de CSS significa Cascading (en cascada). Cuando hay reglas que compiten por estilizar el mismo elemento, el navegador decide cuál gana siguiendo un orden:

Origen: tus estilos ganan a los del navegador (los estilos por defecto que hacen que los <h1> sean grandes).
Especificidad: un selector más específico gana. .titulo gana a h1, y #hero gana a .titulo. Lo verás en la siguiente lección.
Orden: a igual especificidad, la última regla escrita gana.

/* ¿De qué color será el h1? */
h1 {
    color: blue;
}

h1 {
    color: red;
}

/* Respuesta: rojo. Misma especificidad, gana la última. */

No te preocupes si la cascada suena abstracta ahora. En la próxima lección la vas a entender en detalle con selectores y especificidad.

DevTools: tu mejor amigo

Pulsa F12 (o Cmd+Option+I en Mac) en cualquier página web. Eso abre las DevTools del navegador. En la pestaña Elements puedes:

Ver el HTML de cualquier página.
Ver y editar en vivo los estilos CSS de cualquier elemento.
Probar colores, tamaños y propiedades sin tocar tu archivo.
Ver qué estilos están siendo sobrescritos (aparecen tachados).

Es la herramienta número uno de cualquier desarrollador frontend. Si no la usas, estás trabajando a ciegas.

Recupera la landing que creaste en el ejercicio de la primera lección de HTML (o crea una nueva). Añade un archivo styles.css externo que incluya:

Un color de fondo oscuro para el body
Tipografía system-ui con color claro para el texto
Un color de acento para los h1 y h2
Padding en el body para que el contenido no toque los bordes
Un efecto :hover en los elementos de lista

Abre las DevTools y prueba a cambiar colores en vivo antes de escribirlos en tu CSS.

Pistas

Recuerda enlazar el CSS con <link rel="stylesheet" href="styles.css"> en el <head>. Usa el reset básico (* { margin: 0; padding: 0; box-sizing: border-box; }) al principio del archivo para empezar con una base limpia.

Anterior Ejercicio final

Siguiente Selectores y propiedades