Fundamentos de CSS

¿Qué es CSS?

CSS (Cascading Style Sheets / Hojas de Estilo en Cascada) es el lenguaje que da vida visual a tu HTML. Mientras que HTML proporciona la estructura y contenido de una página web, CSS controla cada aspecto de cómo se ve ese contenido—desde colores y fuentes hasta diseños y animaciones. Piensa en HTML como el esqueleto y CSS como la piel, la ropa y el maquillaje.

CSS funciona seleccionando elementos HTML y aplicándoles reglas de estilo. Puedes cambiar colores, ajustar espaciado, crear diseños, agregar animaciones y hacer que tu sitio sea responsivo a diferentes tamaños de pantalla—todo con CSS.

Agregando CSS a HTML

Hay tres formas de agregar CSS a tu HTML, cada una con su propio caso de uso:

<!-- En el head de tu HTML -->
<link rel="stylesheet" href="styles.css" />

<style>
  p { color: blue; }
</style>

<p style="color: blue;">Texto</p>

Selectores CSS

Los selectores son patrones que indican a CSS qué elementos HTML estilizar. Entender los selectores es fundamental para escribir CSS eficiente.

/* Selector de elemento - selecciona todos los elementos de un tipo */
p {
  color: blue;
}

/* Selector de clase - reutilizable, puede aplicarse a cualquier elemento */
.highlight {
  background: yellow;
}

/* Selector de ID - único, debería aparecer solo una vez por página */
#header {
  height: 60px;
}

/* Selector universal - selecciona todo */
* {
  margin: 0;
  padding: 0;
}

/* Selector descendiente - cualquier nivel de anidamiento */
article p {
  font-size: 16px;
}

/* Selector hijo - solo hijos directos */
ul > li {
  list-style: disc;
}

/* Hermano adyacente - inmediatamente siguiente */
h2 + p {
  margin-top: 0;
}

/* Hermano general - todos los hermanos siguientes */
h2 ~ p {
  color: gray;
}

/* Tiene atributo */
input[type] { }

/* Coincidencia exacta */
input[type="email"] {
  border: 1px solid blue;
}

/* Contiene palabra */
a[title~="important"] { }

/* Empieza con */
a[href^="https"] { }

/* Termina con */
a[href$=".pdf"] { }

/* Contiene subcadena */
a[href*="example"] { }

/* Interacción del usuario */
a:hover { color: red; }
input:focus { outline: 2px solid blue; }
button:active { transform: scale(0.95); }

/* Estructurales */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(3n) { /* cada 3ro */ }

/* Estado */
input:disabled { opacity: 0.5; }
input:checked { }
input:valid { border-color: green; }
input:invalid { border-color: red; }

/* Estilizar partes de elementos */
p::first-line {
  font-weight: bold;
}
p::first-letter {
  font-size: 2em;
  float: left;
}

/* Agregar contenido antes/después */
p::before {
  content: "→ ";
  color: blue;
}
p::after {
  content: " ←";
}

La Cascada y Especificidad

Cuando múltiples reglas CSS apuntan al mismo elemento, CSS usa un sistema de especificidad para determinar qué regla gana. Entender esto es crucial para depurar y escribir CSS mantenible.

/* Ejemplos de especificidad */
p { color: blue; }              /* (0,0,1) */
.text { color: green; }         /* (0,1,0) - GANA sobre p */
#main { color: red; }           /* (1,0,0) - GANA sobre .text */
p.text { color: purple; }       /* (0,1,1) - GANA sobre .text */
div p.text { color: orange; }   /* (0,1,2) - GANA sobre p.text */
#main .text { color: pink; }    /* (1,1,0) - GANA sobre todos los anteriores */

/* !important anula la especificidad (¡usar con moderación!) */
p { color: black !important; }  /* GANA sobre todo */

Propiedades CSS Comunes

/* Múltiples formatos de color */
color: #333;                  /* Hex */
color: #333333ff;            /* Hex con alfa */
color: rgb(51, 51, 51);      /* RGB */
color: rgba(51, 51, 51, 0.5); /* RGB con alfa */
color: hsl(0, 0%, 20%);      /* HSL (Tono, Saturación, Luminosidad) */
color: hsla(0, 0%, 20%, 0.5); /* HSL con alfa */

background-color: #f5f5f5;
background: linear-gradient(to right, #3b82f6, #8b5cf6);

font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;           /* Fijo */
font-size: 1rem;           /* Relativo a la raíz */
font-size: 1.2em;          /* Relativo al padre */
font-weight: 400;          /* 100-900 */
font-weight: bold;         /* Igual que 700 */
line-height: 1.5;          /* Sin unidad (recomendado) */
line-height: 24px;
text-align: center;        /* left, right, center, justify */
text-decoration: underline;
text-transform: uppercase; /* lowercase, capitalize */
letter-spacing: 0.05em;
word-spacing: 0.2em;

/* Margen (espaciado exterior) */
margin: 20px;                      /* Todos los lados */
margin: 10px 20px;                 /* Vertical | Horizontal */
margin: 10px 20px 30px;            /* Arriba | H | Abajo */
margin: 10px 20px 30px 40px;       /* Arriba Derecha Abajo Izquierda */

/* Relleno (espaciado interior) */
padding: 20px;                     /* Mismos atajos */

/* Lados individuales */
margin-top: 10px;
padding-bottom: 15px;

border: 1px solid #ccc;         /* ancho estilo color */
border-width: 2px;
border-style: solid;            /* solid, dashed, dotted, none */
border-color: #333;
border-radius: 8px;             /* Esquinas redondeadas */
border-radius: 50%;             /* Círculo */
border-radius: 10px 20px;       /* Arriba-izq/abajo-der | otros */

/* Lados individuales */
border-top: 1px solid #ccc;
border-right: none;

width: 100%;
width: 300px;
max-width: 600px;              /* No excederá esto */
min-width: 320px;              /* No irá por debajo de esto */

height: auto;                  /* Automático basado en contenido */
height: 100vh;                 /* Altura del viewport */

/* Box sizing afecta cómo funcionan width/height */
box-sizing: border-box;        /* Incluye padding y border en el ancho */
box-sizing: content-box;       /* Por defecto: ancho es solo contenido */

Herencia

Algunas propiedades CSS se pasan automáticamente del padre a los hijos. Entender la herencia te ayuda a escribir menos código y evitar repetición.

/* Ejemplo de herencia */
body {
  font-family: Arial, sans-serif;
  color: #333;
  /* Todos los hijos heredan esto automáticamente */
}

/* Controlar herencia explícitamente */
.child {
  color: inherit;         /* Forzar herencia */
  margin: initial;        /* Valor por defecto del navegador */
  padding: unset;         /* Heredar si es heredable, sino initial */
}