02 - CSS

CSS (*Cascading Style Sheets*) define el aspecto de un documento HTML: colores, tamaños, disposición de los elementos. Se escribe en archivos .css enlazados desde el HTML.

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

/* selector { propiedad: valor; } */
h1 {
  color: #1a1a1a;
  font-size: 2rem;
}

.card {
  border: 1px solid #ddd;
  padding: 1rem;
}

nav a {
  text-decoration: none;
}

input[type=email] {
  border-color: #4a90d9;
}

Cuando varios selectores aplican al mismo elemento, gana el más específico: el id supera a la clase y la clase al selector de elemento.

Cada elemento es una caja con contenido, padding, border y margin:

┌─────────── margin ───────────┐
│  ┌──────── border ─────────┐ │
│  │  ┌───── padding ─────┐  │ │
│  │  │     contenido     │  │ │
│  │  └───────────────────┘  │ │
│  └─────────────────────────┘ │
└──────────────────────────────┘

* {
  box-sizing: border-box;   /* el ancho incluye padding y borde */
}

.card {
  padding: 1rem;
  margin-bottom: 0.5rem;
}

Flexbox distribuye los hijos de un contenedor en una dirección:

.catalog {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.catalog .card {
  flex: 1 1 200px;   /* crece, encoge, base */
}

body {
  font-size: 1rem;
  max-width: 60rem;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .catalog .card {
    flex-basis: 100%;
  }
}

• Unidades relativas (rem, %) frente a píxeles fijos.
• max-width y margin: auto centran el contenido.
• Las media queries aplican reglas según el tamaño de pantalla.