Curso: HTML y CSS Moderno - Módulo: CSS3 y Selectores
Lección 1: Introducción a CSS y conexión con HTML
Bienvenido a la primera lección del módulo de CSS3 y Selectores. Si el HTML es el esqueleto y la estructura de una casa (paredes, ventanas, puertas), entonces el CSS (Cascading Style Sheets) es todo lo que hace que esa casa sea habitable y atractiva: la pintura, los muebles, la decoración, la iluminación y la disposición de los espacios. En esta lección, entenderás qué es CSS, por qué es fundamental en el desarrollo web moderno y, lo más importante, aprenderás las diferentes y correctas formas de conectar tus estilos CSS con tus documentos HTML para darles vida.
¿Qué es CSS y por qué es fundamental?
CSS, que significa Hojas de Estilo en Cascada, es un lenguaje de estilos utilizado para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML se encarga de definir la estructura y el contenido semántico (esto es un párrafo, esto un encabezado, esto una lista), CSS toma ese contenido y controla exactamente cómo se debe ver en la pantalla, en papel, o en otros medios. Esto incluye colores, fuentes, espaciado, disposición de los elementos en la página, adaptación a diferentes tamaños de pantalla y efectos visuales complejos.
La separación entre contenido (HTML) y presentación (CSS) es uno de los principios clave del desarrollo web profesional. Esta separación ofrece ventajas enormes: permite que el mismo contenido HTML pueda ser presentado de maneras radicalmente diferentes para distintos dispositivos (un teléfono, una tablet, una pantalla de escritorio, una impresora). Facilita el mantenimiento del sitio, ya que puedes cambiar el diseño completo de cientos de páginas editando un solo archivo CSS. Además, mejora la accesibilidad y el rendimiento, ya que los navegadores pueden cargar y almacenar en caché los estilos de manera eficiente.
Sin CSS, las páginas web serían documentos de texto plano con enlaces azules subrayados y fondos grises, muy similares a los primeros días de la web. CSS es lo que transformó la web de un medio de intercambio de documentos académicos a la plataforma visualmente rica, interactiva y omnipresente que conocemos hoy. Dominar CSS es, por lo tanto, no solo aprender a colorear cajas, sino a controlar la experiencia visual completa del usuario.
Concepto Clave: La Separación de Responsabilidades
Imagina que estás produciendo una obra de teatro. El HTML es el guion. Contiene todas las palabras que dicen los actores, las acotaciones de las escenas y la lista de personajes. Define la sustancia de la obra. El CSS, por otro lado, es el director de arte y el diseñador de iluminación. Es quien decide cómo se visten los actores (estilo), el color y la textura del escenario (fondo), la intensidad y el color de las luces que los iluminan (efectos), y la posición exacta de cada actor en el escenario (disposición). El guion (HTML) podría ser el mismo, pero un director de arte diferente (CSS) puede crear una producción completamente distinta: una versión moderna, una clásica, una oscura o una colorida.
Esta analogía subraya la filosofía central: el contenido y la presentación son preocupaciones distintas. Mantenerlas separadas te da un control sin precedentes y una flexibilidad enorme. Puedes reescribir el "guion" sin preocuparte por arruinar la "iluminación", y puedes cambiar por completo la "puesta en escena" sin tocar una sola palabra del "guion". En términos técnicos, esto significa que tu archivo HTML contiene etiquetas semánticas como <header>, <nav>, <article> y <footer>, mientras que tu archivo CSS contiene reglas que dicen cómo deben verse y comportarse esas etiquetas.
Tip del Instructor: Piensa siempre en el HTML como en la semántica y el significado, y en el CSS como en la piel y la ropa. Una persona (contenido) puede vestirse de muchas maneras (estilos) según la ocasión, pero sigue siendo la misma persona.
Cómo funciona en la práctica: Anatomía de una regla CSS
Antes de conectar CSS con HTML, debemos entender su estructura básica. El código CSS está compuesto por reglas. Cada regla está diseñada para seleccionar uno o más elementos HTML y aplicarles un conjunto de estilos. Una regla CSS se compone de dos partes principales: el selector y el bloque de declaraciones.
El selector es el patrón que le dice al navegador qué elementos HTML queremos estilizar. Puede ser tan simple como el nombre de una etiqueta (como h1 o p), o puede ser mucho más específico y complejo, como veremos en lecciones futuras. El bloque de declaraciones es todo lo que va entre llaves { }. Dentro de este bloque, definimos una o más propiedades y sus correspondientes valores. Cada par propiedad-valor se llama declaración y debe terminar con un punto y coma (;).
Veamos un ejemplo concreto de la anatomía en el siguiente bloque de código. Desglosaremos cada parte para que quede absolutamente claro.
/* Esto es un comentario en CSS. El navegador lo ignora. */
/* Selector: Apunta a TODOS los elementos <p> (párrafos) */
p {
color: blue; /* Declaración: Propiedad 'color' con valor 'blue' */
font-size: 16px; /* Declaración: Propiedad 'font-size' con valor '16px' */
line-height: 1.5; /* Declaración: Propiedad 'line-height' con valor '1.5' */
}
/* Selector: Apunta al elemento con id="principal" */
#principal {
background-color: #f0f0f0; /* El color se puede definir en hexadecimal */
padding: 20px; /* 'padding' es el espacio interno */
border: 1px solid #ccc; /* 'border' define un borde: grosor, estilo, color */
}
/* Selector: Apunta a TODOS los elementos con class="destacado" */
.destacado {
font-weight: bold; /* 'font-weight' controla el grosor de la fuente */
color: darkred;
}Métodos para conectar CSS con HTML
Existen tres métodos principales para aplicar estilos CSS a un documento HTML. Cada uno tiene sus casos de uso, ventajas y desventajas. Es crucial entenderlos todos, pero como desarrollador moderno, priorizarás uno por encima de los otros.
1. CSS Externo (El método recomendado y profesional)
Este es el método más poderoso y el que debes usar en casi todos los proyectos. Consiste en crear un archivo separado con extensión .css (por ejemplo, estilos.css) que contiene todas las reglas CSS. Luego, en el documento HTML, dentro de la sección <head>, se enlaza este archivo utilizando la etiqueta <link>. Este método promueve plenamente la separación de responsabilidades, permite la reutilización de estilos en múltiples páginas y mejora el rendimiento gracias al almacenamiento en caché del navegador.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Página con CSS Externo</title>
<!-- Conexión al archivo CSS externo -->
<link rel="stylesheet" href="ruta/a/mis-estilos.css">
</head>
<body>
<h1>Título estilizado desde un archivo externo</h1>
<p>Este párrafo heredará los estilos definidos en 'mis-estilos.css'.</p>
</body>
</html>2. CSS Interno (o Incrustado)
En este método, las reglas CSS se escriben directamente dentro del documento HTML, utilizando la etiqueta <style>, que también se coloca dentro de la sección <head>. Es útil para estilos que son específicos de una sola página y que no se compartirán con otras, o para prototipos rápidos. Sin embargo, para proyectos con más de una página, se vuelve difícil de mantener, ya que los cambios deben replicarse manualmente en cada archivo HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS Interno</title>
<style>
/* Todo el CSS va aquí, dentro de la misma página HTML */
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #eef;
}
h1 {
color: darkgreen;
text-align: center;
}
</style>
</head>
<body>
<h1>Estilo desde dentro</h1>
<p>Esta página tiene sus estilos definidos en la cabecera.</p>
</body>
</html>3. CSS en Línea (Inline)
Este método aplica estilos directamente a un elemento HTML individual usando el atributo style. Debe evitarse en la medida de lo posible. Rompe por completo el principio de separación, hace el código HTML extremadamente difícil de leer y mantener, y es muy ineficiente (imagina tener que cambiar el color de 100 títulos uno por uno). Su uso está justificado solo en situaciones muy específicas, como estilos dinámicos generados por JavaScript o en contenido de correo electrónico HTML, donde el soporte de CSS externo es limitado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS en Línea (No recomendado)</title>
</head>
<body>
<h1 style="color: red; font-size: 2.5em; border-bottom: 2px dashed blue;">
Título con estilos en línea
</h1>
<p style="background-color: yellow; padding: 10px;">
Este párrafo tiene un fondo amarillo y relleno, definido directamente en la etiqueta.
</p>
</body>
</html>Código en Acción: Un ejemplo completo y funcional
Vamos a crear un ejemplo práctico que utilice el método recomendado: CSS Externo. Crearemos dos archivos: index.html y estilos.css. Este ejemplo demostrará la conexión y el impacto visual inmediato que tiene el CSS.
Paso 1: Crear el archivo HTML (index.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primer Sitio con CSS</title>
<!-- Esta línea es la MAGIA: conecta el HTML con el CSS -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header id="cabecera-principal">
<h1>Bienvenidos al Mundo del CSS</h1>
<p class="subtitulo">Donde el contenido cobra vida.</p>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<article class="articulo-destacado">
<h2>El Poder de la Separación</h2>
<p>Este párrafo demuestra cómo el CSS puede transformar la tipografía, los colores y el espaciado de un simple texto HTML.</p>
<p>Observa el espacio entre líneas, el color del texto y el margen alrededor de este artículo. Todo controlado desde un archivo externo.</p>
</article>
<button class="boton-accion">¡Haz clic para ver la magia!</button>
</main>
<footer>
<p>© 2023 Curso HTML & CSS Moderno. Todos los estilos aplicados con CSS externo.</p>
</footer>
</body>
</html>Paso 2: Crear el archivo CSS (estilos.css)
/* estilos.css - El archivo que da vida a nuestro HTML */
/* Estilos generales para el cuerpo de la página */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
}
/* Estilo para la cabecera usando su ID */
#cabecera-principal {
background: linear-gradient(to right, #3498db, #2c3e50);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
margin-bottom: 30px;
}
/* Estilo para el h1 dentro de la cabecera */
#cabecera-principal h1 {
margin: 0;
font-size: 2.8em;
}
/* Estilo para elementos con la clase "subtitulo" */
.subtitulo {
font-size: 1.2em;
opacity: 0.9;
font-style: italic;
}
/* Estilos para la barra de navegación */
nav {
background-color: #2c3e50;
border-radius: 5px;
margin-bottom: 30px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
nav li {
padding: 15px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 5px 10px;
border-radius: 3px;
transition: background-color 0.3s ease;
}
/* Efecto al pasar el ratón (hover) */
nav a:hover {
background-color: #3498db;
}
/* Estilos para artículos con la clase "articulo-destacado" */
.articulo-destacado {
background-color: white;
padding: 25px;
border-left: 5px solid #3498db;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-bottom: 25px;
}
.articulo-destacado h2 {
color: #2c3e50;
margin-top: 0;
}
/* Estilos para el botón usando una clase */
.boton-accion {
display: inline-block;
background-color: #2ecc71;
color: white;
padding: 12px 25px;
border: none;
border-radius: 50px; /* Bordes completamente redondeados */
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Efecto interactivo para el botón */
.boton-accion:hover {
background-color: #27ae60;
transform: translateY(-3px); /* Se eleva ligeramente */
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
/* Estilos para el pie de página */
footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #ddd;
text-align: center;
color: #7f8c8d;
font-size: 0.9em;
}Al guardar ambos archivos en la misma carpeta y abrir index.html en tu navegador, verás una página web completamente estilizada, con colores, tipografía, espaciado, efectos de hover en la navegación y un botón interactivo. Todo ello, controlado desde el archivo estilos.css.
Errores comunes y cómo evitarlos
Al comenzar con CSS, es normal cometer ciertos errores. Identificarlos temprano te ahorrará horas de frustración.
1. Ruta incorrecta en el atributo href de <link>
Error: El archivo CSS no se carga porque la ruta especificada en href no es correcta. El navegador muestra el HTML sin estilos.
Solución: Verifica la estructura de carpetas. Si estilos.css está en la misma carpeta que index.html, usa href="estilos.css". Si está en una subcarpeta llamada css, usa href="css/estilos.css". Usa las herramientas de desarrollador del navegador (F12) y ve a la pestaña "Red" o "Network" para ver si el archivo CSS da un error 404 (No encontrado).
2. Olvidar el punto y coma (;) al final de una declaración
Error: color: blue font-size: 16px (falta el ; después de blue). Esto puede hacer que la regla completa se rompa y que las declaraciones siguientes sean ignoradas.
Solución: Adopta el hábito de siempre terminar cada declaración con un punto y coma, incluso la última del bloque. Esto previene errores y hace el código más robusto y fácil de extender.
3. Confundir id con class en los selectores
Error: Usar un selector de ID (#) para estilizar múltiples elementos, o usar un selector de clase (.) cuando se necesita una identificación única.
Solución: Recuerda: un ID es único en una página. Úsalo para seleccionar un solo elemento específico (ej. #logo, #menu-principal). Una clase es reutilizable. Úsala para aplicar los mismos estilos a muchos elementos (ej. .boton, .tarjeta, .texto-resaltado).
4. Especificidad y reglas que no se aplican
Error: Escribir una regla CSS pero ver que no tiene efecto porque otra regla más específica la está anulando.
Solución: Comprende el concepto de especificidad en CSS. En general, un selector de ID (#id) es más específico que un selector de clase (.clase), que a su vez es más específico que un selector de etiqueta (p). El estilo en línea (style="...") es el más específico de todos. Usa las herramientas de desarrollador del navegador para inspeccionar el elemento y ver qué reglas se están aplicando y cuáles están siendo tachadas (lo que indica que fueron anuladas).
5. No usar un reset o normalizar de CSS
Error: Diferentes navegadores (Chrome, Firefox, Safari) aplican estilos predeterminados ligeramente distintos a elementos como márgenes, rellenos y tamaños de fuente. Esto puede hacer que tu diseño se vea inconsistente entre navegadores.
Solución: Al inicio de tu archivo CSS principal, incluye un CSS Reset (como el de Eric Meyer) o un Normalize.css. Estas hojas de estilo eliminan o normalizan las inconsistencias predeterminadas entre navegadores, dándote una base limpia y uniforme sobre la cual construir tus estilos.
Checklist de dominio
Al finalizar esta lección, debes ser capaz de verificar los siguientes puntos. Si puedes afirmar cada uno, has asimilado los conceptos fundamentales.