¿Cómo darle estilo a tu página con CSS? | Introducción a HTML y CSS

CSS es el lenguaje que transforma tu página HTML de texto simple a un diseño visual atractivo y profesional.

¿Alguna vez entraste a una página web que se veía completamente en blanco, sin colores ni diseño? Eso es HTML puro sin CSS. Ahora imagina la página de Liverpool o de Mercado Libre sin colores, sin tipografía, sin nada. Imposible de usar, ¿verdad? CSS es lo que convierte esa pantalla vacía en algo que la gente quiere ver.

Cómo conectar tu CSS con tu HTML

Antes de darle estilo a nada, necesitas conectar tus dos archivos. Tienes tu index.html y ahora crearás un archivo llamado estilos.css. Guárdalos en la misma carpeta.

Dentro de tu archivo HTML, agrega esta línea dentro del <head>:

<head>
  <meta charset="UTF-8">
  <title>Mi página</title>
  <link rel="stylesheet" href="estilos.css">
</head>

Esa etiqueta <link> le dice al navegador: "oye, busca el archivo estilos.css y aplica todo lo que encuentres ahí." Sin esa línea, tu CSS no hace nada.

Una regla importante: el nombre del archivo en href="estilos.css" debe coincidir exactamente con el nombre real del archivo. Mayúsculas, minúsculas, todo importa. Si tu archivo se llama Estilos.css con mayúscula y escribes estilos.css, el estilo no cargará en servidores reales.

La historia de Daniela y su tienda en línea

Daniela tiene una pequeña tienda de accesorios en Monterrey. Aprendió HTML y creó su primera página. Pero cuando la abrió en el navegador, todo se veía igual: texto negro sobre fondo blanco.

Su prima, diseñadora web, le dijo: "Daniela, necesitas CSS." En una tarde, Daniela aprendió tres propiedades básicas y su página cambió por completo.

Así se veía su archivo estilos.css al final del día:

body {
  background-color: #f5f0eb;
  font-family: Arial, sans-serif;
  color: #333333;
}

h1 {
  color: #8b4513;
  font-size: 36px;
}

p {
  font-size: 16px;
  line-height: 1.6;
}

Con eso, su página tenía fondo crema, títulos color café y texto legible. Tres reglas. Resultado inmediato.

La anatomía de una regla CSS

Una regla CSS siempre tiene la misma estructura. Mírala con cuidado:

selector {
  propiedad: valor;
}

El selector dice a quién le aplicas el estilo. Puede ser una etiqueta HTML como h1, p, o body.

La propiedad es lo que quieres cambiar: el color, el tamaño, la fuente.

El valor es cómo lo quieres cambiar: red, 24px, Arial.

Cada declaración termina con punto y coma (;). Si lo olvidas, el navegador puede ignorar esa línea o las siguientes. Es el error más común entre principiantes.

Las propiedades que más vas a usar

No necesitas memorizar cientos de propiedades. Con estas cinco, puedes hacer muchísimo:

color — cambia el color del texto.

h2 {
  color: #e63946;
}

background-color — cambia el color de fondo.

header {
  background-color: #1d3557;
}

font-size — cambia el tamaño del texto.

p {
  font-size: 18px;
}

font-family — cambia la tipografía.

body {
  font-family: Georgia, serif;
}

text-align — alinea el texto.

h1 {
  text-align: center;
}

Estas cinco propiedades son el 80% de lo que verás en proyectos reales para principiantes.

La historia de Roberto y el menú de su restaurante

Roberto administra un restaurante familiar en la colonia Doctores, en CDMX. Quería poner su menú en línea para que sus clientes lo vieran desde WhatsApp.

Aprendió HTML la semana pasada. Esta semana le tocó CSS. Roberto tenía miedo de que fuera complicado.

Su instructor le dijo: "Empieza por el body y trabaja hacia afuera." Roberto siguió ese consejo:

body {
  background-color: #fffbf0;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: #c0392b;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 32px;
}

h2 {
  color: #c0392b;
  border-bottom: 2px solid #c0392b;
  padding-bottom: 5px;
}

p {
  font-size: 16px;
  color: #444444;
  line-height: 1.8;
}

El resultado parecía un menú real. Roberto lo compartió en su grupo de WhatsApp y sus clientes le preguntaron: "¿Quién te hizo la página?" Él respondió: "Yo mismo."

¿Ves la diferencia que hace CSS?

Colores en CSS: tres formas de escribirlos

Puedes escribir colores de tres maneras. Las tres funcionan igual.

Por nombre: red, blue, green, white, black. Fácil, pero limitado a unos 140 colores básicos.

Por código hexadecimal: #e63946, #1d3557, #a8dadc. Es el formato más usado por diseñadores. El # va siempre al inicio.

Por valores RGB: rgb(230, 57, 70). Útil cuando trabajas con herramientas de diseño que te dan los valores numéricos.

Para empezar, usa nombres o códigos hexadecimales. Son los más comunes.

Un truco: si buscas en Google "color picker", Google te muestra una herramienta visual donde eliges el color y te da el código hexadecimal listo para copiar.

Errores comunes que frenan a los principiantes

Ver que el CSS no aplica es frustrante. Antes de rendirte, revisa estos tres errores:

Error 1 — El archivo no está conectado. Abre tu HTML y busca la etiqueta <link>. Si no está en el <head>, el navegador no carga el CSS. Sin esa etiqueta, no hay estilo.

Error 2 — El nombre del archivo no coincide. Si tu archivo se llama estilos.css y en el <link> escribiste estilo.css (sin la "s"), no funciona. Revisa letra por letra.

Error 3 — Falta el punto y coma. Cada declaración CSS necesita terminar con ;. Si escribes:

h1 {
  color: red
  font-size: 24px;
}

...el color: red sin punto y coma puede hacer que el font-size tampoco funcione. Siempre cierra cada línea con ;.

Error 4 — Mayúsculas en el nombre del archivo. Como aprendiste en la lección anterior, los nombres en minúsculas evitan problemas. estilos.css, no Estilos.CSS.

Práctica inmediata: estiliza tu proyecto ahora

No esperes a terminar el curso. Abre tu proyecto HTML y haz esto ahora:

Crea un archivo estilos.css en la misma carpeta que tu index.html.
Agrega <link rel="stylesheet" href="estilos.css"> dentro de tu <head>.
Escribe estas tres reglas en tu estilos.css:

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  color: #222222;
}

h1 {
  color: #004a99;
  text-align: center;
}

p {
  font-size: 17px;
  line-height: 1.7;
}

Guarda ambos archivos y abre index.html en tu navegador.

Vas a ver el cambio de inmediato. Ese momento en que tu página cobra vida es una de las mejores sensaciones en el desarrollo web.

Lo que lograste hoy

Hoy conectaste CSS a tu HTML. Aprendiste la estructura de una regla: selector, propiedad y valor. Cambiaste colores, fuentes y tamaños. Y viste cómo tres o cuatro líneas de CSS transforman completamente una página.

Daniela lo hizo en una tarde. Roberto lo hizo en una semana. Tú lo puedes hacer hoy.

En la siguiente lección vas a aprender a usar clases e identificadores en CSS. Eso te va a dar control preciso sobre cada elemento de tu página, sin afectar a los demás.