Introducción a CSS

Las reglas del juego: selectores, cascada, especificidad y herencia.

En el Libro 1 viste que CSS cambia los colores y fuentes de tu página. Pero CSS es mucho más que eso. Es un lenguaje completo con sus propias reglas, y si no las entiendes, vas a pasar horas preguntándote “¿por qué este estilo no se aplica?”.

En este capítulo vas a aprender cómo CSS decide qué estilos ganan cuando hay conflictos. Una vez que entiendas esto, CSS deja de ser misterioso.

Tres formas de agregar CSS

1. CSS en línea (inline)

Directamente en el atributo style del elemento:

<p style="color: red; font-size: 18px;">Texto rojo y grande.</p>

Cuándo usarlo: casi nunca. Es difícil de mantener y no se puede reutilizar.

2. CSS interno (en el `<head>`)

Dentro de una etiqueta <style> en el <head>:

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

Cuándo usarlo: para páginas pequeñas o ejemplos rápidos. Es lo que usaste en el Libro 1.

3. CSS externo (archivo separado)

En un archivo .css enlazado desde el HTML:

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

p {
  color: green;
  font-size: 16px;
}

Cuándo usarlo: siempre que puedas. Es la forma profesional. Separa estructura (HTML) de presentación (CSS), se puede reutilizar en múltiples páginas y es más fácil de mantener.

Separación de responsabilidades

HTML define qué hay en la página. CSS define cómo se ve. Mantenerlos en archivos separados hace que tu código sea más limpio, más fácil de mantener y más reutilizable. Siempre usa CSS externo en proyectos reales.

Anatomía de una regla CSS

h1 {
  color: #00ff41;
  font-size: 2rem;
  font-weight: bold;
}

h1 → es el selector (a quién se aplica el estilo).
{ } → las llaves delimitan el bloque de declaraciones.
color: #00ff41; → es una declaración (propiedad: valor).

Cada declaración tiene una propiedad (color) y un valor (#00ff41), separados por : y terminados con ;.

Selectores: a quién aplicas los estilos

Selector de etiqueta

Aplica estilos a todas las etiquetas de ese tipo:

p {
  line-height: 1.6;
}
/* Todos los párrafos tendrán interlineado de 1.6 */

Selector de clase

Aplica estilos a todos los elementos que tengan esa clase. Las clases se definen con class en HTML y se seleccionan con . en CSS:

<p class="destacado">Este texto es especial.</p>
<p>Este texto es normal.</p>

.destacado {
  color: #00d4ff;
  font-weight: bold;
}

Un elemento puede tener múltiples clases:

<p class="destacado grande">Texto destacado y grande.</p>

Selector de ID

Aplica estilos a un solo elemento con ese ID. Los IDs se definen con id en HTML y se seleccionan con # en CSS:

<h1 id="titulo-principal">Bienvenido</h1>

#titulo-principal {
  text-align: center;
}

Selectores combinados

/* Descendiente: párrafos DENTRO de article */
article p {
  font-size: 1.1rem;
}

/* Hijo directo: solo los <li> hijos directos de <ul> */
ul > li {
  margin-bottom: 0.5rem;
}

/* Múltiples selectores: mismos estilos para h1, h2 y h3 */
h1, h2, h3 {
  font-family: 'Inter', sans-serif;
}

/* Selector de atributo: enlaces que abren en nueva pestaña */
a[target="_blank"] {
  text-decoration: underline;
}

Pseudoclases

Aplican estilos según el estado del elemento:

/* Al pasar el mouse por encima */
a:hover {
  color: #00ff41;
}

/* Al hacer clic */
button:active {
  transform: scale(0.98);
}

/* Cuando el input tiene el foco */
input:focus {
  border-color: #00d4ff;
  outline: none;
}

/* El primer hijo */
li:first-child {
  font-weight: bold;
}

/* Filas pares de una tabla */
tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
}

La cascada y la especificidad

Cuando dos reglas CSS aplican al mismo elemento con la misma propiedad, ¿cuál gana? Aquí es donde muchos se frustran. Pero las reglas son claras.

La cascada

CSS significa Cascading Style Sheets (hojas de estilo en cascada). “En cascada” significa que los estilos se aplican en orden, y los que vienen después sobrescriben a los anteriores:

p {
  color: red;
}

p {
  color: blue; /* ← Este gana porque viene después */
}

La especificidad

Pero la cascada solo aplica cuando los selectores tienen la misma especificidad. Si un selector es más específico que otro, gana sin importar el orden.

La especificidad se calcula así (de menor a mayor peso):

Nivel	Selector	Ejemplo	Peso
0	Etiqueta	`p`, `h1`, `div`	0-0-1
1	Clase	`.destacado`, `.btn`	0-1-0
2	ID	`#titulo`	1-0-0
3	Inline	`style="..."`	Máximo

p {
  color: red;         /* Especificidad: 0-0-1 */
}

.destacado {
  color: blue;        /* Especificidad: 0-1-0 → GANA */
}

#titulo {
  color: green;       /* Especificidad: 1-0-0 → GANA sobre clase */
}

Pro tip

En la práctica, usa principalmente clases para tus estilos. Las clases tienen la especificidad justa: son más específicas que las etiquetas (bueno) pero no tan específicas como los IDs (que son difíciles de sobrescribir). La mayoría de frameworks CSS profesionales usan solo clases.

Herencia

Algunas propiedades CSS se heredan de padres a hijos automáticamente. Si le pones color: blue al <body>, todos los párrafos dentro serán azules (a menos que los sobrescribas).

Se heredan: color, font-family, font-size, line-height, text-align.

No se heredan: background, border, margin, padding, width, height.

body {
  font-family: 'Inter', sans-serif;  /* Se hereda a todos los hijos */
  color: #e4e4e7;                     /* Se hereda a todos los hijos */
  background: #0a0a0f;               /* NO se hereda */
}

La regla de oro de CSS

Especificidad > Cascada > Herencia. Primero gana el selector más específico. Si tienen la misma especificidad, gana el que viene después en el código. Si no hay regla directa, se hereda del padre (solo para propiedades heredables).

Unidades CSS

CSS tiene muchas unidades. Estas son las que necesitas conocer:

Unidades absolutas

/* Píxeles — tamaño fijo, no cambia */
font-size: 16px;
width: 300px;

Unidades relativas

/* rem — relativo al tamaño de fuente del <html> (generalmente 16px) */
font-size: 1.5rem;    /* = 24px si el base es 16px */
padding: 2rem;        /* = 32px */

/* em — relativo al tamaño de fuente del elemento padre */
margin-bottom: 1em;   /* = el tamaño de fuente del padre */

/* % — relativo al elemento padre */
width: 50%;           /* La mitad del ancho del padre */

/* vw/vh — relativo al viewport (ventana del navegador) */
width: 100vw;         /* El ancho completo de la ventana */
height: 100vh;        /* El alto completo de la ventana */

Pro tip

Usa rem como tu unidad principal. Es predecible (siempre relativa al root), respeta las preferencias de tamaño de texto del usuario y hace tu diseño más accesible. Usa px solo para cosas que necesitan ser exactas (como bordes de 1px).

Colores en CSS

Varias formas de definir colores:

/* Nombre */
color: red;
color: tomato;

/* Hexadecimal */
color: #ff0000;       /* Rojo */
color: #00ff41;       /* Verde terminal */
color: #0a0a0f;       /* Casi negro */

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (con transparencia) */
color: rgba(0, 255, 65, 0.5);  /* Verde al 50% de opacidad */

/* HSL (tono, saturación, luminosidad) */
color: hsl(120, 100%, 50%);    /* Verde puro */

Ejercicio: Estiliza tu página semántica

Toma la página HTML semántica que creaste en el capítulo anterior y dale vida con CSS.

Crea un archivo style.css y enlázalo en tu HTML con <link>.
Estilos base del body: fondo oscuro (#0a0a0f), texto claro (#e4e4e7), fuente sans-serif, max-width: 800px, centrado con margin: 0 auto y padding: 2rem.
Estilos para el header: color de fondo ligeramente diferente, padding, y los enlaces del nav en verde (#00ff41) sin subrayado.
Estilos para los enlaces: color azul neón (#00d4ff), sin subrayado por defecto, subrayado al hacer hover (a:hover).
Estilos para los artículos: borde izquierdo de 3px verde, padding-left de 1rem, margen inferior entre artículos.
Estilos para el footer: texto centrado, color gris (#71717a), tamaño de fuente más pequeño.
Experimenta con pseudoclases: agrega un efecto de hover a los artículos (cambiar el color de fondo sutilmente).

Resumen

CSS se agrega de tres formas: inline (evitar), interno (<style>), y externo (<link>) — siempre preferir externo.
Una regla CSS tiene un selector y un bloque de declaraciones (propiedad: valor).
Los selectores van de menos a más específicos: etiqueta < clase < ID < inline.
La cascada decide entre selectores de igual especificidad (gana el último).
La herencia pasa ciertos estilos de padres a hijos automáticamente.
Usa rem como unidad principal y clases como selectores principales.

Fuente oficial: Cascade and specificity en MDN — explicación detallada de cómo CSS resuelve conflictos.

Siguiente capítuloPropiedades CSSCada propiedad explicada: qué hace, cuándo usarla y cómo combinarlas.

Introducción a CSS

Introducción a CSS

Tres formas de agregar CSS

1. CSS en línea (inline)

2. CSS interno (en el <head>)

3. CSS externo (archivo separado)

Anatomía de una regla CSS

Selectores: a quién aplicas los estilos

Selector de etiqueta

Selector de clase

Selector de ID

Selectores combinados

Pseudoclases

La cascada y la especificidad

La cascada

La especificidad

Herencia

Unidades CSS

Unidades absolutas

Unidades relativas

Colores en CSS

Resumen

2. CSS interno (en el `<head>`)