CodeForge

Maquetación Web Dinámica / CSS3 fundamentos: la piel

Tres formas de aplicar CSS (y por qué solo una es correcta)

Teoría15 min20 XP

Empieza el módulo que le da vida visual a todo lo que construiste. Primera lección: cómo se conecta el CSS con el HTML. Hay tres formas — vas a conocer las tres, entender por qué el 95% de las veces solo una es profesional, y escribir tu primera regla CSS con plena conciencia de su anatomía.

La anatomía de una regla CSS

Antes de dónde ponerlo, qué es:

anatomia.css

Se lee: "a todos los h1 de la página, píntales el texto violeta y dales 32 píxeles de tamaño". El selector elige a quién, cada declaración (propiedad: valor;) dice qué. No olvides el punto y coma — es el error de sintaxis número uno del planeta.

Las tres formas

tres-formas.html
<!-- 1. Inline: el atributo style (NO en tu día a día) -->
<h1 style="color: red;">Título</h1>

<!-- 2. Interno: etiqueta <style> en el head (para experimentos) -->
<head>
<style>
  h1 { color: red; }
</style>
</head>

<!-- 3. Externo: un archivo .css enlazado (LA forma profesional) -->
<head>
<link rel="stylesheet" href="styles.css">
</head>

¿Por qué gana el archivo externo?

  1. Un solo lugar: cambias el color de marca en UNA línea y las 200 páginas del sitio se actualizan.
  2. Caché: el navegador descarga styles.css una vez y lo reutiliza en todas las páginas — el sitio vuela.
  3. Separación: el HTML dice QUÉ es cada cosa; el CSS dice CÓMO se ve. Dos archivos, dos responsabilidades, cero enredos.

Así se ve la conexión funcionando:

Tu sitio tiene 40 páginas y el cliente quiere cambiar el azul de los títulos. Con CSS externo, ¿cuántos archivos tocas?

Mini-reto

Toma tu periódico del reto pasado, crea periodico.css, enlázalo con <link> y escribe una sola regla: h1 { color: rebeccapurple; }. Si el nombre del periódico cambia de color, la conexión vive — y tu periódico dejó oficialmente de ser "solo HTML".

Qué sigue

Ya sabes CONECTAR estilos. La próxima lección es el corazón del CSS: los selectores — el lenguaje para apuntarle exactamente al elemento que quieres, y a ningún otro.