Fundamentos de CSS: estiliza tu primera página web (bien y sin enredos)

Cuando di mis primeros pasos entendí algo simple: HTML es el esqueleto y CSS es la vida de la página. Colores, ritmo, jerarquía… Eso es lo que hace que una web llame la atención y atraiga clientes.

HTML es el esqueleto, CSS es la vida: qué puedes lograr en minutos

Con muy poco CSS ya puedes:

Mejorar legibilidad con tipografía y espaciado.
Aplicar una paleta de color coherente con marca.
Crear jerarquía visual: qué se lee primero y qué después.
Guiar la atención con contraste y alineación.

Práctica (2 min): toma cualquier HTML simple y cámbiale tipo de letra, tamaño y color a los títulos. Observa cómo cambia la percepción “de marca”.

Tu primer enlace de estilos: estructura mínima index.html + styles.css

Crea dos archivos en la misma carpeta.

index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mi primera página con CSS</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header">
    <h1>Hola, CSS</h1>
    <p class="tagline">Dando vida a mi primera web</p>
  </header>

  <main class="container">
    <section>
      <h2>Bienvenid@</h2>
      <p>Este es un párrafo de ejemplo para probar estilos.</p>
      <a class="btn" href="#">Llamada a la acción</a>
    </section>
  </main>

  <footer class="site-footer">
    <small>© 2025 Mi Marca</small>
  </footer>
</body>
</html>

styles.css

:root{
  --brand-h: 260;            /* tono base */
  --brand-s: 70%;
  --brand-l: 50%;
  --text: #1f2937;           /* gris oscuro legible */
  --bg: #ffffff;
}

*{ box-sizing: border-box; }
html{ font-size: 16px; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.site-header, .site-footer{
  text-align: center;
  padding: 2rem 1rem;
  background: hsl(var(--brand-h) var(--brand-s) 96%);
}

h1{
  margin: 0.5rem 0 0.25rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.tagline{
  margin: 0;
  color: hsl(var(--brand-h) 15% 35%);
}

.container{
  width: min(100%, 60rem);
  margin: 2rem auto;
  padding: 0 1rem;
}

h2{ margin-top: 0; }
p{ margin: 0.75rem 0; }

.btn{
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  color: white;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 18px hsl(var(--brand-h) 60% 40% / 0.25);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

Externo, interno o inline: qué conviene al empezar

Archivo externo (styles.css): recomendado; separa contenido y presentación.
Interno (<style> en <head>): útil para demos rápidas.
Inline (style="..."): evita usarlo salvo para casos puntuales porque ensucia el HTML.

Práctica: cambia --brand-h a 200 o 340 y observa cómo toda la paleta se ajusta.

Selectores y propiedades que realmente usarás hoy

Texto que se ve profesional (tipos, tamaños, colores)

h1, h2, h3 { letter-spacing: -0.02em; }
p{ max-width: 65ch; } /* legibilidad */
a{ color: hsl(var(--brand-h) var(--brand-s) 40%); }
a:hover{ text-decoration: underline; }

Yo empecé cambiando títulos y párrafos: con solo tipografía y color, la web ya “suena” a marca.

Ejercicio: agrega una clase .lead para párrafos introductorios:

.lead{ font-size: 1.125rem; color: #374151; }

Úsala en el primer <p> y compara.

Caja CSS sin miedo (margin, padding, border)

.card{
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: white;
}

Práctica: crea dos .card con distinto margen y comenta cuál se lee mejor y por qué.

Centrar (por fin) un div: Flexbox vs Grid explicado corto

“Centrar un div” fue meme durante años; antes de la IA se debatía sin fin. En realidad hoy es sencillísimo.

Receta 1 línea con Flexbox

.center{
  min-height: 40vh;
  display: flex;
  justify-content: center;   /* eje X */
  align-items: center;        /* eje Y */
  background: #f3f4f6;
}

<div class="center">
  <div class="card">Estoy perfectamente centrado</div>
</div>

Alternativa con Grid y cuándo elegirla

.center-grid{
  min-height: 40vh;
  display: grid;
  place-items: center; /* X + Y */
  background: #eef2ff;
}

¿Cuál usar?

Flexbox: alinear elementos en una dimensión (fila o columna), ideal para navbars, cards con botón.
Grid: alinear en dos dimensiones o hacer layouts de página.

Práctica: cambia min-height a 100vh para centrar verticalmente en toda la pantalla.

Colores y unidades modernas: hsl(), rem y percentajes útiles

hsl(h s l): modifica tono/saturación/luminosidad sin romper paleta.
rem: escala con el tamaño base del documento; perfecto para tipografía responsive.
clamp(min, pref, max): tamaños fluidos que se adaptan al viewport.

:root{ --space: 1rem; }
h1{ font-size: clamp(1.8rem, 5vw, 3rem); }
section{ padding: var(--space); }
.badge{
  background: hsl(var(--brand-h) 90% 95%);
  color: hsl(var(--brand-h) 30% 30%);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}

Práctica: crea 3 badges con distintos niveles de saturación y elige el que mejor contraste tenga.

Maquetar con sentido de negocio: jerarquía visual que convierte

Maquetar con sentido me obligó a pensar en qué es lo importante del negocio: titular claro, beneficio, prueba social y una acción.

Pauta rápida:

Zona caliente superior: titular claro (beneficio), subtítulo breve, botón principal.
Prueba: logos de clientes o testimonial corto.
Detalle: 3 beneficios con icono y texto corto (escaneable).
CTA final: repetir llamada a la acción.

.hero{
  display: grid;
  gap: 1rem;
  padding-block: 3rem;
  text-align: center;
}
.features{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.feature{
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
}

Errores típicos al empezar (cascada, herencia, especificidad) y cómo evitarlos

Especificidad: prefiere clases frente a IDs; evita !important.
Cascada: ordena tu CSS por bloques (reset → tokens → layout → componentes).
Herencia: colores y tipografías se heredan; márgenes no.
Nombres: usa clases descriptivas (.btn-primary, .site-header), no .azul123.

Práctica: rompe un estilo con #id y arréglalo pasando a clase. Observa cómo cambia la especificidad.

Mini-proyecto: deja atractiva una landing simple en 10 pasos

Copia el index.html y styles.css base.
Cambia --brand-h a tu tono de marca.
Ajusta tipografía con clamp.
Crea una sección .hero con título, subtítulo .lead y .btn.
Agrega grid de 3 features.
Crea una .card con testimonial.
Implementa un bloque centrado con .center (Flexbox).
Agrega .badge para destacar una novedad.
Revisa contraste (texto sobre fondos claros).
Pulido: hover suave en enlaces y botones.

En mi caso, solo con estos 10 pasos una landing básica ya “respira” marca y atrae más atención: se entiende en segundos qué ofreces y cómo contactarte.

Recursos para seguir: qué estudiar después

Selectores avanzados (:is, :has), variables CSS, Grid avanzado, accesibilidad (contrastes, foco), transiciones y animate con @keyframes.

Conclusión

Dar estilo no es decorar: es comunicar. Empieza por tipografía, color y espaciado; domina Flexbox/Grid para colocar; y usa la jerarquía para convertir. Centrar un div ya no es un misterio; lo importante es contar tu propuesta con claridad.

FAQs rápidas

¿Dónde coloco mi CSS? En un archivo externo (styles.css) y lo enlazas con <link rel="stylesheet" href="styles.css">.
¿Flexbox o Grid para empezar? Flexbox para filas/columnas simples; Grid para layouts de página.
¿Qué unidades uso? rem y clamp() para texto; % y fr para layouts; hsl() para color consistente.
¿Cómo organizo mi CSS? Tokens (variables) → base (reset/typography) → layout (grid/flex) → componentes (botón, card) → utilidades.

Fundamentos de CSS: Estilizando tu primera página web