CSS · Capítulo 1
¿Qué es CSS?
Descubre cómo CSS transforma el HTML en diseños visuales atractivos y aprende las tres formas de aplicarlo.
Teoría
CSS significa Cascading Style Sheets — Hojas de Estilo en Cascada. Es el lenguaje que controla la apariencia visual de las páginas web: colores, tipografías, tamaños, espaciados, animaciones y layouts.
Sin CSS, la web sería texto negro sobre fondo blanco. CSS es lo que transforma una página funcional en una experiencia visual atractiva.
La palabra "Cascading" (en cascada) hace referencia a cómo los estilos se aplican: pueden venir de múltiples fuentes y hay reglas de prioridad que determinan cuál prevalece.
/* Sintaxis básica de CSS */
selector { /* a qué elemento(s) aplica */
propiedad: valor; /* qué cambiar y a qué valor */
}
/* Ejemplo real: estilar un título h1 */
h1 {
color: #4F8EF7; /* color del texto: azul */
font-size: 2rem; /* tamaño: 2 × 16px = 32px */
font-weight: bold;/* texto en negrita */
}
/* Ejemplo real: estilar párrafos p */
p {
color: #E8E8F0; /* texto gris claro */
line-height: 1.6; /* interlineado: 1.6 × tamaño fuente */
margin-bottom: 1rem; /* espacio de 16px debajo de cada párrafo */
}💡¿Sabías que?
<font> manualmente en 1000 páginas. ¡CSS resolvió ese caos!Las tres formas de aplicar CSS
Hay tres maneras de agregar CSS a un documento HTML. Es importante entender cuál usar en cada situación:
1. CSS Inline (en línea) — NO recomendado
Se escribe directamente en el atributo
style dentro de la etiqueta HTML. El problema: si tienes 50 párrafos y quieres cambiar el color, tendrías que editar los 50 uno por uno.2. CSS Interno — Para practicar
Se escribe dentro de una etiqueta
<style> que va siempre dentro del <head> del HTML. Funciona, pero mezcla el diseño con el contenido en un solo archivo.3. CSS Externo — La forma profesional
Creas un archivo separado con extensión
.css (por ejemplo estilos.css) y lo conectas al HTML con una etiqueta <link> dentro del <head>. Así puedes reutilizar los mismos estilos en múltiples páginas.<!-- 1. CSS Inline: el estilo va dentro del atributo style -->
<p style="color: red; font-size: 18px;">Texto rojo</p>
<!-- 2. CSS Interno: la etiqueta <style> va SIEMPRE dentro del <head> -->
<head>
<style>
p { color: blue; }
h1 { font-size: 2rem; }
</style>
</head>
<!-- 3. CSS Externo: enlaza el archivo .css con <link> en el <head> -->
<head>
<link rel="stylesheet" href="css/estilos.css">
</head>Cómo funciona el atributo href en la etiqueta link
Cuando usas CSS externo, la etiqueta <link> necesita tres atributos clave:
rel="stylesheet"→ Le dice al navegador que el archivo es una hoja de estilos CSS (no un link cualquiera).
href="ruta/al/archivo.css"→ La ruta donde está tu archivo CSS. Es como la dirección del archivo en tu computadora.
La ruta puede ser de dos tipos:
- Relativa: parte desde donde está el HTML. Si tu archivo CSS está en la carpeta
css/, escribeshref="css/estilos.css".
- Absoluta: URL completa, por ejemplo
href="https://ejemplo.com/estilos.css"(para cargar CSS de otro servidor).
Para proyectos propios siempre usa rutas relativas:
<!-- Si estilos.css está en la MISMA carpeta que el HTML -->
<link rel="stylesheet" href="estilos.css">
<!-- Si estilos.css está dentro de una carpeta llamada css/ -->
<link rel="stylesheet" href="css/estilos.css">
<!-- Si estilos.css está en la carpeta ANTERIOR -->
<link rel="stylesheet" href="../estilos.css">💡Estructura de carpetas recomendada
mi-proyecto/├── index.html ← tu página principal├── css/│ └── estilos.css ← todos tus estilos aquí├── js/│ └── script.js ← tus scripts aquí└── img/ ← tus imágenes aquí
Con esta estructura, en tu index.html conectas el CSS así: <link rel="stylesheet" href="css/estilos.css">
Anatomía de una regla CSS
Una regla CSS tiene dos partes:
1. Selector → ¿A qué elemento(s) se aplica el estilo?
2. Declaración → propiedad: valor; dentro de llaves { }
Puedes agrupar múltiples declaraciones en una regla, y también aplicar la misma regla a múltiples selectores separados por coma.
Propiedades CSS más comunes
Antes de ver más código, es importante saber qué hace cada propiedad:
color→ Cambia el color del texto (no el fondo). Acepta nombres (red), hexadecimales (#FF0000) o RGB (rgb(255,0,0)).
font-size→ Tamaño de la letra.1remequivale al tamaño base del navegador (normalmente 16px).2rem= 32px.
font-weight→ Grosor de la letra:normal(delgado),bold(negrita), o números del 100 al 900.
font-family→ La tipografía a usar. Siempre agrega una fuente genérica al final (sans-serif,serif,monospace) por si la primera no carga.
text-align→ Alineación del texto:left(izquierda),center(centrado),right(derecha).
background-color→ Color de fondo del elemento.
margin→ Espacio exterior al elemento (empuja otros elementos).margin-bottom: 1remagrega espacio abajo.
padding→ Espacio interior entre el borde y el contenido del elemento.
line-height→ Altura de cada línea de texto.1.6significa 1.6 veces el tamaño de fuente — mejora la legibilidad.
border-radius→ Redondea las esquinas de un elemento.50%lo hace circular.
/* Una regla con múltiples declaraciones */
h1 {
color: #4F8EF7; /* color del texto (azul) */
font-size: 2.5rem; /* letra grande: 2.5 × 16px = 40px */
text-align: center; /* texto centrado */
margin-bottom: 1rem; /* 16px de espacio debajo */
}
/* Múltiples selectores con la misma regla */
h1, h2, h3 {
font-family: 'Outfit', sans-serif; /* tipografía Outfit; si falla, usa sans-serif */
font-weight: bold; /* texto en negrita */
}
/* Los comentarios en CSS usan /* */ */⚠️CSS no da errores visibles
colr: red; en vez de color: red;, simplemente no pasará nada. Siempre revisa el panel de Estilos en DevTools si algo no funciona.🚀DevTools para CSS
Ejercicio práctico
🎯 Tu misión
Aplica estilos CSS a la página usando las tres formas (inline, interno y comentarios que expliquen cada uno). Cambia colores del título y párrafos, ajusta el tamaño de fuente, y agrega colores de fondo diferentes a cada sección.