Fundamentos de CSS: selectores y modelo de caja

Al finalizar este tema

Comprenderá cómo CSS aplica estilos al HTML y podrá modificar el diseño seleccionando los elementos deseados mediante selectores.

CSS se encarga del diseño

Si el HTML es el esqueleto de una página web, el CSS (Cascading Style Sheets) es la vestimenta. El CSS se encarga de todos los aspectos visuales del diseño: colores, tamaños, espaciados y disposición.

html

<!-- La forma más sencilla de aplicar CSS dentro de un archivo HTML -->
<style>
  h1 {
    color: navy;
    font-size: 24px;
  }
  p {
    color: #333;
    line-height: 1.6;
  }
</style>

<h1>Título</h1>
<p>Este párrafo recibe estilos.</p>

h1 { ... } — Esta es una regla CSS. h1 es el selector (¿a qué elemento?) y el contenido entre llaves es la declaración (¿qué estilo?).

Tipos de selectores

La pregunta más importante en CSS es: "¿qué elementos se van a seleccionar para aplicarles estilos?". Lo que determina esto es el selector.

css

/* Selector de etiqueta — toda la etiqueta */
p { color: gray; }

/* Selector de clase — comienza con punto (.), reutilizable en varios elementos */
.highlight { background-color: yellow; }

/* Selector de ID — comienza con numeral (#), único en la página */
#main-title { font-size: 32px; }

/* Selector de hijo — solo los elementos dentro de un elemento específico */
.card p { font-size: 14px; }

html

<h1 id="main-title">Título grande</h1>
<p class="highlight">Párrafo destacado</p>
<p>Párrafo normal</p>

En la práctica, lo más utilizado es el selector de clase (.), ya que permite reutilizar un mismo estilo en varios elementos.

Modelo de caja

El navegador trata todos los elementos HTML como cajas. Estas cajas se componen de cuatro capas, desde el interior hacia el exterior:

text

┌─────────────────────────── margin (espacio exterior) ──┐
│  ┌──────────────────────── border (borde) ───┐  │
│  │  ┌───────────────────── padding (espacio interno) │  │
│  │  │                                        │  │
│  │  │         content (contenido real)              │  │
│  │  │                                        │  │
│  │  └────────────────────────────────────────┘  │
│  └──────────────────────────────────────────────┘
└──────────────────────────────────────────────────┘

css

.card {
  width: 300px;          /* ancho del contenido */
  padding: 16px;         /* espacio entre el contenido y el borde */
  border: 1px solid #ddd; /* borde */
  margin: 20px;          /* espacio con otros elementos */
}

"¿Por qué definí el ancho como 300px, pero en realidad es más ancho?" — Porque se suman el padding y el borde. Para evitar esto, usa box-sizing: border-box;, lo que hace que el padding y el borde se incluyan dentro del ancho. Se configura como valor predeterminado en casi todos los proyectos.

→ Aplicación en Bio: DevBench — Fundamentos de HTML y CSS

BioPlayground

CSS básico: selectores y modelo de caja.