Tu página de Okini funciona, pero se ve como un documento de Word de 1997: negro sobre blanco, tipografía por defecto, todo pegado al borde izquierdo. Para cambiar eso necesitas CSS, el lenguaje que controla cómo se ve una página web, separado del HTML que define qué dice. Aquí aprendes a conectar tu hoja de estilos, escribir tus primeras reglas y entender por qué algunos colores se heredan solos.
Por qué HTML y CSS son lenguajes separados
HTML responde a qué dice la página. CSS responde a cómo se ve. Son dos preguntas distintas y por eso son dos lenguajes distintos.
Piensa en un reporte de empresa. El contenido, los datos, los títulos y los párrafos son el HTML. El diseño corporativo, los colores, la tipografía y los márgenes son el CSS. Si mañana la empresa cambia su identidad visual, el reporte no desaparece, solo cambia el vestido. La información sigue intacta.
Esa separación te permite cambiar por completo cómo se ve un sitio sin tocar una sola línea de contenido. Y si tienes varias páginas, todas pueden compartir el mismo archivo de estilos sin repetir nada [04:30].
¿Qué es CSS? CSS significa Cascading Style Sheets. Es el lenguaje que define colores, tipografías, espaciados y distribución de los elementos HTML en una página web.
Cómo conectar un archivo CSS con tu HTML
Primero crea un archivo nuevo en la misma carpeta de tu proyecto y nómbralo styles.css. Ese archivo existe, pero tu HTML aún no sabe que existe. Tienes que presentarlos.
La conexión se hace con la etiqueta <link> dentro del <head> de tu HTML:
html
<link rel="stylesheet" href="styles.css">
Cada parte cumple un rol específico:
link es la etiqueta que conecta tu HTML con recursos externos.rel="stylesheet" le dice al navegador qué tipo de recurso es.href="styles.css" le dice dónde encontrarlo.
En qué se diferencia link de la etiqueta a
Las dos comparten la palabra link por razones históricas, pero hacen cosas distintas. La etiqueta <a> viene de anchor y crea enlaces visibles que el usuario puede clickear; vive en el <body>. La etiqueta <link> conecta el documento con recursos externos que el navegador necesita pero el usuario no ve, como una hoja de estilos o una fuente de Google Fonts; vive en el <head> [03:20].
La forma fácil de recordarlo: a es para humanos, link es para el navegador.
Cómo se escribe una regla de CSS
Una regla tiene dos partes: el selector y las propiedades. El selector indica a qué elemento afecta la regla, y las propiedades indican qué cambia.
La estructura siempre es la misma:
css
selector {
propiedad: valor;
}
El primer selector útil es body, porque es el contenedor de todo lo visible. Ahí defines el color de fondo y la tipografía base de la página:
css
body {
background-color: #f5f1e8;
font-family: Georgia, serif;
color: #2a2a2a;
}
Los colores no se escriben en lenguaje natural sino en formato hexadecimal. Para elegirlos te sirve Coolors para paletas y Google Fonts para tipografías [01:10]. Con tres líneas le diste fondo, tipografía y color de texto a toda la página.
Cómo cambiar el tamaño y color de un título
Para estilizar el H1 puedes escribir:
css
h1 {
color: #2d5a3d;
font-size: 2.5rem;
}
Aquí aparece algo interesante. Pusiste color en el body y también en el H1. Si no hubieras escrito esa segunda regla, el título habría tomado el color del body automáticamente. Eso se llama herencia: algunas propiedades de CSS se transmiten de un elemento padre a sus hijos. El color es una de ellas. Es como el apellido familiar: lo heredas, salvo que hagas algo específico para cambiarlo [06:40].
Cómo usar selectores descendientes y padding
Para estilizar los enlaces de la navegación puedes usar un selector descendiente:
css
nav a {
color: #2d5a3d;
}
Eso significa: todos los elementos a que estén dentro de un nav. Es una de las formas más útiles de ser preciso sin tener que ponerle clase a cada elemento.
Luego, el <main> necesita aire alrededor del contenido. Eso se logra con padding:
css
main {
padding: 3rem 2rem;
}
¿Qué es el padding en CSS? Es el espacio interno entre el borde de un elemento y su contenido. Sirve para que el texto y los elementos no queden pegados a los bordes.
Qué es la cascada en CSS y por qué importa
La C de CSS viene de Cascading. Si tienes dos reglas que afectan al mismo elemento con la misma propiedad, gana la que está más abajo en el archivo. Eso es la cascada y es el mecanismo que resuelve los conflictos.
Cuando un estilo no funciona como esperas, una de las primeras preguntas que debes hacerte es si hay otra regla más abajo que lo está sobreescribiendo [08:30].
Cómo aprovechar este vocabulario con IA
Si una herramienta como Lovable o Cursor te genera una página con estilos que no te gustan, ya sabes dónde buscar: el archivo CSS o la sección <style> si los estilos están embebidos en el HTML. Y puedes pedir cambios con precisión usando palabras como color, background-color, font-family, font-size o padding.
La diferencia entre un prompt útil y uno vago es exactamente este vocabulario. Esas palabras no son tecnicismos, son la forma de describir lo que ves en pantalla.
¿Qué paleta y qué tipografía elegiste para tu versión? Cuéntame en los comentarios cómo quedó tu página después de aplicar estos primeros estilos.
