Bloque 1: Fundamentos del estilo

¿Qué es CSS y cómo se aplica?

CSS son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada). Es el lenguaje que controla la presentación de la web: colores, tamaños, tipografías, espaciados y posición. Si HTML es el esqueleto, CSS es la piel, la ropa y el maquillaje.

1.1 · Anatomía de una regla CSS

Toda hoja de estilos está hecha de reglas. Cada regla tiene un selector (¿a quién le hablo?) y un bloque de declaraciones (¿qué le cambio?):

p {
  color: #7c3aed;   /* propiedad : valor ; */
  font-size: 18px;
}

1.2 · Las tres formas de aplicar CSS

<head>
  <style>
    h1 { color: teal; }
  </style>
</head>

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

1.3 · La cascada: ¿quién gana cuando hay conflicto?

La «C» de CSS significa cascada. Cuando varias reglas tocan la misma propiedad del mismo elemento, el navegador decide así:

1. Especificidad: gana la regla más concreta. Orden aproximado: id (#) > clase (.) > etiqueta (p).
2. Orden: si empatan, gana la que aparece última en el código.
3. Origen: lo inline pisa casi todo, y !important se salta la cola (¡úsalo solo en emergencias!).

Selectores básicos y combinados

2.1 · Los cinco selectores fundamentales

2.2 · Agrupar y combinar

/* Agrupación: misma regla para varios selectores */
h1, h2, h3 {
  font-family: "Sora", sans-serif;
}

/* Descendiente: cualquier p DENTRO de .card */
.card p { line-height: 1.6; }

/* Hijo directo: li colgados justo de ul.menu */
ul.menu > li { list-style: none; }

/* Hermano adyacente: el p justo después de un h2 */
h2 + p { margin-top: 0; }

Colores, tipografías y unidades

3.1 · Cuatro maneras de decir un color

.a { color: violet; }              /* nombre */
.b { color: #7c3aed; }           /* hexadecimal (el estándar) */
.c { color: rgb(124, 58, 237); }   /* rojo, verde, azul (0–255) */
.d { color: rgba(124, 58, 237, .5); } /* con transparencia */

• Hex abreviado: si sus pares se repiten puedes acortarlo: #ffffff → #fff.
• HSL (tono, saturación, luminosidad) es ideal para crear paletas: hsl(262, 83%, 58%).
• Herramienta imprescindible: el cuentagotas de las DevTools (F12) para robar colores a cualquier web.

3.2 · Tipografías web

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;       /* sin unidad = multiplicador */
}

h1 {
  font-weight: 800;       /* 100 fino … 900 negro */
  text-align: center;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

3.3 · Unidades: absolutas vs relativas

El modelo de caja

Para el navegador, todo elemento es una caja rectangular con cuatro capas, de dentro hacia fuera:

1. Contenido — el texto o la imagen (lo mide width/height).
2. padding — aire interior entre contenido y borde.
3. border — el borde: grosor, estilo y color (1px solid #ccc).
4. margin — espacio transparente que separa la caja de sus vecinas.

.card {
  max-width: 360px;
  padding: 24px;                 /* shorthand: los 4 lados */
  border: 1px solid #ddd;
  border-radius: 14px;
  margin: 40px auto;             /* vertical auto = centrada */
  background-color: #fff;
}

4.1 · El truco imprescindible: box-sizing

Por defecto, width mide solo el contenido: si añades padding, la caja crece. Con box-sizing: border-box el padding y el borde quedan dentro del ancho declarado, y calcular layouts se vuelve trivial:

.card {
  width: 300px;
  padding: 20px;
}
/* ocupa 300 + 40 = 340px 😱 */

* {
  box-sizing: border-box;
}
/* .card ocupa exactamente 300px ✌️ */