Estilos y Diseño

Sintaxis básica

Una regla CSS se compone de un selector y un bloque de declaraciones (propiedad: valor).

/* Selector → a quién aplicar */
h1 {
  color: #ff7b54;
  font-size: 2rem;
  font-weight: bold;
}

/* Clase → .nombre-clase */
.tarjeta {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* ID → #nombre-id (único por página) */
#hero {
  min-height: 100vh;
  display: flex;
}
CSS

Formas de vincular CSS

<!-- 1. Externo (recomendado) -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Interno -->
<style>
  body { margin: 0; }
</style>

<!-- 3. En línea (evitar si es posible) -->
<p style="color: red;">Texto rojo</p>
HTML

Selectores y especificidad

Los selectores determinan a qué elementos se aplican los estilos. La especificidad decide cuál regla gana cuando hay conflicto.

/* Selectores avanzados */
nav a         { color: blue; }   /* descendiente */
nav > a       { color: red; }    /* hijo directo */
p + p         { margin-top: 0; } /* hermano adyacente */
a:hover       { opacity: .8; }   /* pseudo-clase */
li:first-child { font-weight: bold; }
input[type="text"] { border: 1px solid gray; }
CSS

Box Model (Modelo de Caja)

Todo elemento HTML es una caja rectangular compuesta por 4 capas:

.caja {
  /* Tamaño del contenido */
  width: 300px;
  height: 150px;

  /* Relleno interior (arriba | derecha | abajo | izquierda) */
  padding: 16px 24px;

  /* Borde */
  border: 2px solid #4ecdc4;
  border-radius: 8px;

  /* Margen exterior */
  margin: 1rem auto;

  /* Incluye padding y border en el width */
  box-sizing: border-box;
}
CSS

Colores en CSS

/* Formas de declarar colores */
color: red;                       /* nombre */
color: #ff0000;                   /* hex */
color: rgb(255, 0, 0);           /* rgb */
color: rgba(255, 0, 0, 0.5);    /* rgba (transparencia) */
color: hsl(0, 100%, 50%);       /* hsl */
background: linear-gradient(135deg, #ff7b54, #a78bfa);
CSS

Flexbox

Flexbox es el sistema de disposición más usado para alinear y distribuir elementos en una dimensión (fila o columna).

.contenedor {
  display: flex;
  flex-direction: row;          /* row | column */
  justify-content: center;     /* alineación eje principal */
  align-items: center;         /* alineación eje cruzado */
  flex-wrap: wrap;              /* envolver si no caben */
  gap: 1rem;                    /* espacio entre hijos */
}

.item {
  flex: 1;        /* crecer para ocupar espacio */
  flex-basis: 200px;
}
CSS

Tipografía

Ejercicio Interactivo

Edita el HTML y CSS combinados. Presiona Ejecutar para ver el resultado:

Ejercicio 2 — Flexbox Layout

Tareas