Introducción a CSS

1.Qué es CSS

CSS (Cascading Style Sheets, «hojas de estilo en cascada») es el lenguaje que define cómo se ve el HTML: colores, tipografía, tamaños, espacios y posición. HTML dice qué es cada cosa; CSS dice cómo luce.

Una regla de CSS se compone de un selector (a qué elementos se aplica) y un bloque de declaraciones (qué cambios se hacen):

• Selector: h1 elige todos los títulos de nivel 1.
• Propiedad: color es lo que quieres cambiar.
• Valor: navy es el cambio concreto.
• Cada declaración termina en ; y todo el bloque va entre llaves { }.

2.Dónde se escribe el CSS

<head>
  <meta charset="UTF-8" />
  <title>Mi página</title>
  <link rel="stylesheet" href="estilos.css" />
</head>

3.Selectores

Los selectores deciden a qué elementos afecta una regla. Estos son los cuatro que usarás el 90% del tiempo:

• Una clase se puede repetir en muchos elementos; es la herramienta principal de estilo.
• Un id debe ser único en la página; se reserva para enlaces ancla y casos especiales.
• Un elemento puede tener varias clases separadas por espacio: class="aviso grande".

4.Color y texto

5.El modelo de caja

En CSS, todo elemento es una caja rectangular, formada por cuatro capas, de adentro hacia afuera:

.caja { padding: 10px; }               /* los cuatro lados */
.caja { padding: 10px 20px; }          /* arriba-abajo | izquierda-derecha */
.caja { padding: 10px 20px 5px 0; }    /* arriba, derecha, abajo, izquierda */
.caja { margin: 0 auto; }              /* centra horizontalmente un bloque con ancho */

6.Colocar elementos: flexbox

Flexbox es la herramienta moderna para acomodar elementos en fila o columna. Se activa en el contenedor con display: flex y reparte a sus hijos.

Recuerdas el menú de la lección 6, una lista dentro de un <nav>? Con cuatro propiedades pasó de lista vertical a barra horizontal. Prueba cambiar justify-content a space-between o flex-direction a column.

7.Estados y transiciones

CSS no solo da forma: también reacciona a lo que hace la persona. Las pseudoclases aplican estilos en ciertos estados:

• :hover: cuando el cursor está encima.
• :focus: cuando el elemento está seleccionado con el teclado o con clic.
• :active: mientras se pulsa.
• :first-child y :nth-child(n): por posición.

Con transition el cambio se vuelve suave en lugar de brusco:

8.Diseño adaptable

Tu página se verá en pantallas de todo tamaño. Una media query aplica estilos solo si se cumple una condición:

.tarjetas { display: flex; gap: 16px; }

@media (max-width: 600px) {
  .tarjetas { flex-direction: column; }
}

Lee: «si la pantalla mide 600 px o menos, apila las tarjetas en columna». Recuerda que para que funcione en celulares necesitas la línea <meta name="viewport" content="width=device-width, initial-scale=1.0"> en el <head>, que ya incluyes desde la lección 1.

9.Variables y orden

Las variables CSS guardan un valor para reutilizarlo. Si cambias la variable, cambia todo el sitio:

:root {
  --color-principal: #4f46e5;
  --radio: 12px;
}

.boton {
  background: var(--color-principal);
  border-radius: var(--radio);
}

Así está hecho el tema claro y oscuro de este curso: al activar el modo oscuro solo cambian los valores de las variables; el resto del CSS no se toca.

Un orden recomendado para tu CSS

1. Variables y reglas globales (:root, * { box-sizing }, body).
2. Elementos generales: h1, p, a, img.
3. Componentes con clase: .tarjeta, .boton, .menu.
4. Media queries al final.

10.Errores frecuentes

• Olvidar el ; al final de una declaración, o una llave }: el resto de las reglas deja de funcionar.
• Escribir mal una propiedad (colour, font-colour): el navegador la ignora sin avisar.
• Usar id en vez de class para estilos repetidos.
• Ruta incorrecta en <link>: si la página no cambia de aspecto, revisa que el archivo CSS se encuentre donde dice href.
• Usar px en todo: prefiere rem y % para tamaños de texto y espacios.
• Quitar el contorno de foco sin reemplazarlo.
• Depender solo del color para transmitir información: añade texto o íconos.
• No usar la herramienta de inspección. Pulsa F12 en el navegador, haz clic derecho sobre cualquier elemento y elige Inspeccionar: verás qué reglas se aplican y podrás probar cambios al instante.

11.Glosario