Ruta CSS

CSS para principiantes

Con HTML tienes la estructura. Con CSS le das el estilo: colores, tipografías, espacios y colocación.

Qué es CSS y cómo conectarlo a tu HTMLLas tres formas de añadir estilos, y cómo seleccionar elementos

Disponible

El modelo de caja (box model)Próximamente

Colores, tipografía y espaciadoPróximamente

Flexbox: colocar elementos en fila y columnaPróximamente

Lección 1 — Qué es CSS y cómo conectarlo a tu HTML

CSS (Cascading Style Sheets) es el lenguaje que controla el aspecto visual de tu HTML: colores, tamaños de letra, márgenes, dónde va cada cosa en la pantalla. HTML dice qué es cada elemento; CSS dice cómo se ve.

Hay tres formas de añadir CSS a una página. En proyectos reales casi siempre se usa la tercera:

En línea, dentro del propio elemento con style="...". Rápido para probar, pero desordenado si lo usas en todo el sitio.
Interno, con una etiqueta <style> dentro del <head>. Útil para pruebas de una sola página.
Externo, en un archivo .css aparte, enlazado con <link>. Es la forma recomendada: separa contenido y estilo, y puedes reutilizar el mismo archivo en varias páginas.

index.html

<head>
  <link rel="stylesheet" href="estilos.css">
</head>

Dentro del archivo .css, cada regla tiene un selector (a qué elemento afecta) y un bloque de propiedades entre llaves. Los tres selectores más básicos:

p { } — selector de elemento: afecta a todos los <p> de la página.
.destacado { } — selector de clase (con un punto): afecta a cualquier elemento con class="destacado". Puedes reutilizar la misma clase en varios elementos.
#titulo-principal { } — selector de id (con almohadilla): afecta a un único elemento, el que tenga id="titulo-principal".

estilos.css

h1 {
  color: #6f6bf0;
  font-size: 32px;
}

.destacado {
  background-color: #fff3cd;
  padding: 10px;
}

💡 Pruébalo tú mismo: coge la página HTML de la lección 1 de la ruta HTML, crea un archivo estilos.css al lado con el código de arriba, enlázalo con <link> y añade class="destacado" a tu párrafo. Verás el título en morado y el párrafo con fondo amarillo claro.