CSS para principiantes
Con HTML tienes la estructura. Con CSS le das el estilo: colores, tipografías, espacios y colocación.
Lección 1 — Qué es CSS y cómo conectarlo a tu HTML
CSS (Cascading Style Sheets) es el lenguaje que controla el aspecto visual de tu HTML: colores, tamaños de letra, márgenes, dónde va cada cosa en la pantalla. HTML dice qué es cada elemento; CSS dice cómo se ve.
Hay tres formas de añadir CSS a una página. En proyectos reales casi siempre se usa la tercera:
- En línea, dentro del propio elemento con
style="...". Rápido para probar, pero desordenado si lo usas en todo el sitio. - Interno, con una etiqueta
<style>dentro del<head>. Útil para pruebas de una sola página. - Externo, en un archivo
.cssaparte, enlazado con<link>. Es la forma recomendada: separa contenido y estilo, y puedes reutilizar el mismo archivo en varias páginas.
<head>
<link rel="stylesheet" href="estilos.css">
</head>Dentro del archivo .css, cada regla tiene un selector (a qué elemento afecta) y un bloque de propiedades entre llaves. Los tres selectores más básicos:
p { }— selector de elemento: afecta a todos los<p>de la página..destacado { }— selector de clase (con un punto): afecta a cualquier elemento conclass="destacado". Puedes reutilizar la misma clase en varios elementos.#titulo-principal { }— selector de id (con almohadilla): afecta a un único elemento, el que tengaid="titulo-principal".
h1 {
color: #6f6bf0;
font-size: 32px;
}
.destacado {
background-color: #fff3cd;
padding: 10px;
}estilos.css al lado con el código de arriba, enlázalo con <link> y añade class="destacado" a tu párrafo. Verás el título en morado y el párrafo con fondo amarillo claro.
Lección 2 — El modelo de caja (box model)
En CSS, todo elemento es una caja rectangular, aunque en pantalla parezca solo texto o una imagen. Esa caja tiene siempre cuatro capas, de dentro hacia fuera:
- Content — el contenido real: el texto, la imagen, lo que sea.
- Padding — el espacio interior, entre el contenido y el borde de la caja.
- Border — el borde de la caja, puede tener grosor, estilo y color.
- Margin — el espacio exterior, entre esta caja y las cajas de al lado.
Entender estas cuatro capas es la base para colocar cualquier cosa en una página sin sorpresas.
.tarjeta {
padding: 20px;
border: 2px solid #6f6bf0;
margin: 16px;
}Con ese código, un elemento con class="tarjeta" tendrá 20px de aire por dentro antes de tocar el borde morado, y 16px de separación por fuera respecto a lo que tenga al lado. padding y margin aceptan también valores distintos por lado, en el orden arriba-derecha-abajo-izquierda:
.tarjeta {
padding: 10px 20px 10px 20px; /* arriba derecha abajo izquierda */
margin-top: 24px; /* también puedes fijar un solo lado */
}Un detalle que confunde a todo el mundo al principio: por defecto, cuando fijas width a un elemento, ese ancho es solo el del content — el padding y el border se suman por encima, así que la caja acaba siendo más ancha de lo que pusiste. La solución casi universal es esta regla, que hace que width incluya padding y border:
* {
box-sizing: border-box;
}estilos.css de la lección 1, añade la regla .destacado { padding: 16px; border: 2px solid #6f6bf0; margin: 20px; } y observa cómo el párrafo se separa del resto y gana un borde propio. Luego prueba a añadir y quitar * { box-sizing: border-box; } y compara cómo cambia el ancho total de la caja.
Lección 3 — Colores, tipografía y espaciado
Ya sabes seleccionar elementos y entender su caja. Toca la parte más visible: cómo se ven los colores y el texto. CSS acepta varios formatos de color, y en la práctica vas a usar sobre todo estos dos:
- Nombres — un puñado de colores con nombre en inglés:
red,white,navy... cómodos para probar rápido, limitados en matices. - Hexadecimal —
#RRGGBB, seis dígitos que representan rojo, verde y azul. Es el formato que verás en cualquier paleta de diseño, incluida la de EGV.
body {
color: #44475A;
background-color: #ffffff;
}
.aviso {
color: red; /* nombre */
background-color: #fff3cd; /* hexadecimal */
}color pinta el texto; background-color pinta el fondo del elemento. Para la tipografía, estas cuatro propiedades cubren la mayoría de los casos:
font-family— la fuente. Se indica una lista de opciones separadas por comas, de más a menos preferida, terminando en una genérica (sans-serif,serif) por si ninguna está disponible.font-size— el tamaño del texto.font-weight— el grosor:normal(400) obold(700) son los más usados.line-height— la altura de línea, clave para que párrafos largos no se vean apretados.
body {
font-family: "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
h1 {
font-weight: bold;
font-size: 32px;
}Para usar una tipografía que no viene instalada en el ordenador de quien visita tu página —como las que verás en muchas webs, incluida esta misma academia— se enlaza desde Google Fonts: eliges la fuente, copias el <link> que te da y la usas en font-family por su nombre.
Por último, text-align coloca el texto dentro de su caja: left (por defecto), center o right. Combinado con el margin y padding de la lección 2, ya tienes control sobre color, tipografía y espaciado — las tres piezas que más cambian el aspecto de una página.
.titulo-centrado {
text-align: center;
padding: 24px 0;
}estilos.css, cambia el color y el font-family del body entero, luego añade text-align: center; a tu h1. Son cuatro líneas de código, pero notarás el cambio en toda la página al recargar.
Lección 4 — Flexbox: colocar elementos en fila y columna
Hasta ahora cada elemento ocupa su propia línea, uno debajo de otro — el comportamiento por defecto del navegador. Flexbox es el sistema de CSS pensado para colocar varios elementos en fila (o en columna) y repartir el espacio entre ellos sin cálculos a mano. Se activa en el contenedor que envuelve a los elementos, no en los elementos mismos:
.contenedor {
display: flex;
}Con esa sola línea, todos los hijos directos de .contenedor pasan de apilarse verticalmente a colocarse en fila, uno junto a otro. A partir de ahí, dos propiedades sobre el propio contenedor controlan la mayoría de los casos:
justify-content— cómo se reparten en el eje principal (horizontal por defecto):flex-start,center,space-between(todo el espacio libre entre elementos) ospace-around.align-items— cómo se alinean en el eje cruzado (vertical por defecto):flex-start,center,flex-endostretch(los estira para que ocupen toda la altura).
.barra-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}gap añade un espacio fijo entre elementos sin tener que ponerle margin a cada uno por separado — mucho más cómodo, y evita el problema clásico del margen sobrante en el primer o último elemento de la fila.
Por defecto, flexbox coloca en fila (flex-direction: row). Para apilar en columna en vez de en fila, basta con cambiar esa propiedad — justify-content y align-items siguen funcionando igual, solo que sus ejes se intercambian:
.tarjetas {
display: flex;
flex-direction: column;
gap: 12px;
}Un último detalle útil: si los elementos no caben en una sola fila (por ejemplo, en móvil), flex-wrap: wrap deja que pasen a la siguiente línea en vez de encogerse o desbordar la pantalla. Es habitual añadirlo junto con display: flex en cualquier fila de tarjetas o botones que también deba verse bien en pantallas estrechas.
<div class="contenedor"> y aplícale display: flex; justify-content: space-between;. Verás los elementos pasar de estar uno debajo de otro a repartirse en una sola fila, con el espacio sobrante distribuido entre ellos.