Curso: HTML y CSS Moderno - Módulo: CSS3 y Selectores

Lección: Selectores, colores y tipografía

Bienvenido a una de las lecciones fundamentales para dominar el diseño web. Aquí sentaremos las bases de cómo dar estilo a tus páginas web de manera precisa y efectiva. Aprenderás a seleccionar elementos HTML con precisión, a aplicar y entender sistemas de color modernos, y a controlar la tipografía para una excelente legibilidad y experiencia de usuario. Esta lección es el cimiento sobre el que construirás todos tus estilos futuros.

Fundamentos de los Selectores CSS

Los selectores son los patrones que utilizamos para decirle al navegador "a qué elementos HTML quiero aplicar estos estilos". Piensa en ellos como un sistema de direcciones muy preciso para tu documento. Sin un buen entendimiento de los selectores, aplicar estilos se convierte en una tarea frustrante y poco eficiente, ya que podrías estar afectando elementos que no deseas o, por el contrario, no lograr que los estilos lleguen a su destino.

Existen varios tipos de selectores, cada uno con un nivel de especificidad y uso diferente. Los más básicos son los selectores de tipo (que seleccionan por etiqueta HTML, como h1 o p), los selectores de clase (precedidos por un punto, como .destacado) y los selectores de ID (precedidos por una almohadilla, como #header). La elección entre uno y otro no es arbitraria y tiene implicaciones importantes en la reutilización del código y la especificidad de los estilos.

Además de estos, CSS3 introdujo una gama más poderosa de selectores, conocidos como selectores avanzados. Estos incluyen los selectores de atributo (como [type="email"]), los selectores de pseudo-clase (como :hover o :nth-child()) y los selectores de pseudo-elemento (como ::before). Dominar esta jerarquía y funcionalidad es el primer paso para escribir CSS limpio, mantenible y potente.

/* Selector de Tipo: Aplica a TODAS las etiquetas 
 */

p {

    margin-bottom: 1em;

}



/* Selector de Clase: Aplica a cualquier elemento con class="destacado" */

.destacado {

    background-color: yellow;

    padding: 10px;

}



/* Selector de ID: Aplica al elemento único con id="principal" */

#principal {

    border: 2px solid black;

}



/* Selector de Atributo: Aplica a inputs con type="email" */

input[type="email"] {

    border-color: blue;

}



/* Selector de Pseudo-clase: Aplica al estado "hover" de los enlaces */

a:hover {

    color: red;

    text-decoration: underline;

}

Concepto Clave: Especificidad y Cascada

Imagina que le das tres instrucciones contradictorias a una persona: "pinta la pared de azul", "no, mejor de verde" y "en realidad, de rojo". ¿Qué color elige? CSS resuelve este conflicto a través de dos mecanismos interrelacionados: la cascada y la especificidad. La cascada significa que los estilos se aplican en el orden en que el navegador los lee (de arriba a abajo, y teniendo en cuenta hojas de estilo externas, internas y en línea). Si dos reglas tienen la misma especificidad, gana la que aparece última.

La especificidad es un peso o puntuación que determina qué regla de estilo se aplica cuando hay conflicto. Es como una jerarquía de mando. Un estilo en línea (dentro del atributo `style`) tiene la máxima especificidad. Le siguen los selectores de ID, luego las clases, atributos y pseudo-clases, y finalmente los selectores de tipo y pseudo-elementos. Cuanto más específico sea el selector, mayor será su peso y prevalecerá sobre reglas más generales, incluso si estas se declaran después en el código.

Tip Profesional: Para mantener tu CSS manejable, intenta trabajar con la menor especificidad posible. Usa principalmente clases. Evita el uso excesivo de IDs y ¡nunca uses !important como solución rápida! Es como gritar para ganar una discusión; rompe el flujo natural de la cascada y hace el código muy difícil de depurar.

Una analogía útil es pensar en un sistema de direcciones postal. Un selector de tipo como `div` es como decir "cualquier casa". Un selector de clase como `.casa-azul` es como decir "la casa pintada de azul". Un selector de ID como `#casa-de-juan` es una dirección exacta: "Calle Mayor, 10". Si hay instrucciones contradictorias para "cualquier casa" y para "Calle Mayor, 10", las instrucciones específicas de la dirección exacta siempre ganarán.

Cómo funciona en la práctica: Un ejemplo paso a paso

Vamos a aplicar lo aprendido en un escenario real. Supongamos que tenemos un artículo de blog con un título, párrafos, un bloque de cita y un enlace. Queremos estilizarlo de manera coherente y específica.

Paso 1: Estructura HTML. Primero, construimos nuestro contenido semántico con las etiquetas apropiadas. Usaremos un <article> como contenedor, un <h1> para el título, varios <p> para los párrafos, un <blockquote> para la cita y un <a> para el enlace. A algunos elementos les añadiremos clases para un control más fino.

Paso 2: Aplicar estilos base con selectores de tipo. Empezamos definiendo estilos generales para los elementos básicos. Por ejemplo, daremos un tamaño de fuente y una familia tipográfica a todo el cuerpo del documento, y un margen consistente a los párrafos. Estos estilos son de baja especificidad y establecen la base.

Paso 3: Refinar con clases. Ahora, queremos que el primer párrafo, que es la entradilla del artículo, sea más destacado. En lugar de usar un selector de tipo que afectaría a todos los párrafos, añadimos una clase .entradilla solo al primer <p> y creamos una regla CSS para esa clase. Esto nos da un control preciso sin afectar a otros párrafos.

Paso 4: Añadir interacción y detalles. Finalmente, usamos pseudo-clases para añadir interactividad. Por ejemplo, cambiaremos el color del enlace cuando el usuario pase el cursor sobre él (a:hover). También podríamos usar un pseudo-elemento como ::first-letter en la entradilla para crear una letra capital. En cada paso, estamos usando selectores con un alcance y propósito claramente definidos.

Colores en CSS: Más allá del nombre básico

Definir colores en CSS va mucho más allá de escribir palabras como "red" o "blue". Para un control profesional, necesitas entender los diferentes sistemas de representación de color. El más común es el código hexadecimal, un sistema de base-16 que representa la intensidad de rojo, verde y azul (RGB) con seis caracteres (por ejemplo, #FF5733). Los dos primeros caracteres representan el rojo, los dos siguientes el verde y los dos últimos el azul, con valores que van del 00 (mínimo) al FF (máximo).

Otra forma muy utilizada es la función rgb() y su variante con canal alfa, rgba(). Con rgb(255, 87, 51) obtenemos el mismo color naranja del ejemplo hexadecimal. La gran ventaja de rgba() es el cuarto parámetro, el alpha, que controla la transparencia en un rango de 0.0 (completamente transparente) a 1.0 (completamente opaco). Por ejemplo, rgba(255, 87, 51, 0.5) da un naranja semitransparente.

CSS3 introdujo sistemas más intuitivos como hsl() y hsla(). HSL significa Matiz (Hue), Saturación (Saturation) y Luminosidad (Lightness). El matiz es un ángulo en la rueda de color (0-360 grados), la saturación es un porcentaje (0% gris, 100% color puro) y la luminosidad también es un porcentaje (0% negro, 100% blanco, 50% normal). Este sistema es mucho más fácil para ajustar un color: para hacer un tono más claro, solo aumentas la luminosidad; para hacerlo más apagado, reduces la saturación.

/* Diferentes formas de definir el MISMO color naranja */



/* Palabra clave (limitado) */

color: orangered;



/* Código Hexadecimal (el más común en la web) */

color: #FF5733;



/* Código Hexadecimal abreviado (cuando cada par es igual: #FF5533) */

color: #F53;



/* Función RGB */

color: rgb(255, 87, 51);



/* Función RGBA con 50% de transparencia */

background-color: rgba(255, 87, 51, 0.5);



/* Función HSL: Hue=12°, Saturación=100%, Luminosidad=60% */

color: hsl(12, 100%, 60%);



/* Función HSLA con 70% de transparencia */

background-color: hsla(12, 100%, 60%, 0.7);

Control de Tipografía y Texto

La tipografía es uno de los pilares del diseño visual y la experiencia de usuario. CSS ofrece un control exhaustivo sobre cómo se presenta el texto. La propiedad fundamental es font-family, que define la familia tipográfica. Es crucial proporcionar una lista de fuentes de respaldo (fuentes seguras para la web) separadas por comas, ya que no todas las fuentes están disponibles en todos los sistemas. La lista termina con una familia genérica como serif, sans-serif, o monospace.

El tamaño se controla con font-size. Es altamente recomendable usar unidades relativas como rem (relativa al tamaño de fuente del elemento raíz, html) o em (relativa al tamaño de fuente del elemento padre). Esto hace que tu diseño sea más accesible y responda mejor a los ajustes que el usuario pueda hacer en su navegador. Un font-size: 1.2rem; significa "1.2 veces el tamaño de fuente base del documento".

Otras propiedades esenciales son font-weight para el grosor (normal, bold, o valores numéricos como 400 para normal o 700 para negrita), line-height para el interlineado (crucial para la legibilidad, un valor sin unidades como 1.5 es una buena práctica), y text-align para la alineación horizontal. Además, propiedades como letter-spacing (espaciado entre letras) y text-transform (mayúsculas, minúsculas) te permiten ajustar los detalles para lograr el tono visual exacto que buscas.

Código en acción: Un ejemplo completo y funcional

A continuación, unimos todos los conceptos: selectores, colores y tipografía, en un ejemplo completo que estiliza una tarjeta de perfil de usuario. Observa cómo se combinan los diferentes tipos de selectores, el uso de colores en formato hexadecimal y HSL, y el control detallado de las propiedades de texto.

/* --- ESTILOS GENERALES (Selectores de tipo y universal) --- */

* {

    box-sizing: border-box; /* Modelo de caja más predecible */

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-size: 1rem;

    line-height: 1.6;

    color: #333; /* Gris oscuro para el texto principal */

    background-color: hsl(210, 20%, 98%); /* Fondo azul muy claro y suave */

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

}



/* --- ESTILOS DE LA TARJETA (Selector de clase) --- */

.tarjeta-perfil {

    background-color: white;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Sombra sutil con rgba */

    width: 100%;

    max-width: 400px;

    overflow: hidden;

    padding: 30px;

    text-align: center;

}



/* --- ESTILOS DE LA CABECERA DE LA TARJETA (Selector descendente) --- */

.tarjeta-perfil header {

    margin-bottom: 25px;

}



/* Selector de tipo para la imagen dentro del header de .tarjeta-perfil */

.tarjeta-perfil header img {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid #3498db; /* Borde azul usando hexadecimal */

}



/* --- ESTILOS DE TIPOGRAFÍA (Combinando selectores) --- */

/* Selector de tipo para h1 dentro de .tarjeta-perfil */

.tarjeta-perfil h1 {

    font-size: 1.8rem;

    font-weight: 700;

    color: #2c3e50; /* Azul muy oscuro */

    margin: 15px 0 5px 0;

    letter-spacing: -0.5px;

}



/* Selector de clase para el puesto */

.puesto {

    font-size: 1rem;

    font-weight: 400;

    color: #7f8c8d; /* Gris medio */

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 20px;

}



/* Selector de tipo para párrafos dentro de .tarjeta-perfil */

.tarjeta-perfil p {

    font-size: 0.95rem;

    color: #555;

    margin-bottom: 20px;

    text-align: justify;

}



/* --- ESTILOS DEL BOTÓN (Clase y pseudo-clase) --- */

.boton-contacto {

    display: inline-block;

    background-color: hsl(204, 70%, 53%); /* Azul usando HSL */

    color: white;

    text-decoration: none;

    padding: 12px 28px;

    border-radius: 50px; /* Bordes completamente redondeados */

    font-weight: 600;

    font-size: 0.95rem;

    transition: all 0.3s ease; /* Transición suave para el efecto hover */

    border: 2px solid transparent;

}



/* Pseudo-clase :hover para el estado de ratón encima */

.boton-contacto:hover {

    background-color: transparent;

    color: hsl(204, 70%, 53%);

    border-color: hsl(204, 70%, 53%); /* Mismo azul para el borde */

}



/* Pseudo-clase :focus para accesibilidad (teclado) */

.boton-contacto:focus {

    outline: 3px solid rgba(52, 152, 219, 0.5); /* Outline azul semitransparente */

}

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <title>Ejemplo Tarjeta de Perfil</title>

    <link rel="stylesheet" href="estilos.css"> <!-- Enlaza el CSS de arriba -->

</head>

<body>

    <article class="tarjeta-perfil">

        <header>

            <img src="https://via.placeholder.com/120" alt="Foto de perfil de Ana García">

            <h1>Ana García</h1>

            <p class="puesto">Desarrolladora Frontend Senior</p>

        </header>

        <p>Apasionada por crear interfaces web accesibles, eficientes y hermosas. Con más de 8 años de experiencia en HTML5, CSS3, JavaScript y frameworks modernos. Siempre en busca del equilibrio perfecto entre diseño y funcionalidad.</p>

        <a href="mailto:[email protected]" class="boton-contacto">Contactar</a>

    </article>

</body>

</html>

Errores comunes y cómo evitarlos

Al comenzar con CSS, es natural cometer ciertos errores que pueden llevar a frustración. Identificarlos temprano te ahorrará horas de depuración.

1. Especificidad excesiva y uso de !important: Crear selectores demasiado específicos como #contenedor .lista ul li a o abusar de !important crea un código frágil y difícil de sobrescribir. Solución: Diseña con clases simples y reutilizables. Usa una metodología como BEM para nombrarlas. Reserva el !important solo para utilidades de CSS de framework o para anular estilos de terceros cuando no tengas otro control.

2. No usar unidades relativas para fuentes y espaciado: Usar píxeles (px) para todo fija los tamaños y dificulta la accesibilidad, ya que los usuarios no pueden ajustarlos fácilmente desde su navegador. Solución: Usa rem para font-size, margin y padding. Define un tamaño base en el elemento html (ej: font-size: 100%; o 62.5%; para cálculos fáciles) y luego usa rem en todo el documento.

3. No proporcionar fuentes de respaldo (fallback) en font-family: Declarar solo una fuente personalizada que el usuario no tenga instalada hará que el navegador use su fuente por defecto (generalmente Times New Roman), arruinando el diseño. Solución: Siempre termina la propiedad font-family con una familia genérica. Ej: font-family: 'Roboto', Arial, Helvetica, sans-serif;.

4. Confundir padding, border y margin en el modelo de caja: No entender que el width y height definidos por defecto solo aplican al contenido, y que añadir padding y border aumenta el tamaño total del elemento, es una fuente común de desajustes en el diseño. Solución: Aplica box-sizing: border-box; a todos los elementos con el selector universal *. Esto hace que width y height incluyan el padding y el border, haciendo los cálculos mucho más intuitivos.

5. Estilizar por etiqueta en lugar de por clase en componentes reutilizables: Si usas article p { ... } para dar estilo a los párrafos dentro de un componente específico, esos estilos se aplicarán a TODOS los párrafos dentro de TODOS los artículos de tu sitio, limitando la reutilización. Solución: Usa clases para estilizar componentes. Por ejemplo, añade una clase .tarjeta al artículo y luego escribe tus estilos como .tarjeta .texto { ... }. Esto aísla los estilos y los hace portables.

Checklist de dominio

Antes de pasar a la siguiente lección, asegúrate de poder verificar mentalmente los siguientes puntos. Si hay alguno que no dominas, repasa la sección correspondiente.

• Puedo explicar la diferencia entre un selector de tipo, de clase y de ID, y sé cuándo es apropiado usar cada uno.


• Comprendo el concepto de especificidad y cascada, y puedo predecir qué regla CSS se aplicará en un conflicto de estilos.


• Sé definir colores usando al menos tres métodos diferentes: hexadecimal, rgb()/rgba() y hsl()/hsla().


• Puedo aplicar y modificar propiedades de tipografía básicas: font-family, font-size, font-weight, line-height y text-align.


• Sé crear un efecto de interacción simple (como cambio de color) usando la pseudo-clase :hover en un enlace o botón.


• Puedo estructurar un archivo CSS de forma lógica, agrupando estilos generales y específicos, y comentando secciones si es necesario.


• Reconozco y puedo evitar al menos tres de los errores comunes listados en la sección anterior (especificidad excesiva, falta de fuentes de respaldo, no usar box-sizing).


• Soy capaz de tomar un diseño simple en una imagen o descripción y traducirlo a HTML semántico con CSS funcional usando selectores, colores y tipografía.

Hablar por WhatsApp