Selector de clase

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 12 de 76.

El selector de clase se utiliza para seleccionar elementos HTML en función del valor de su atributo class. Permite aplicar los mismos estilos a múltiples elementos en todo el documento. Los selectores de clase son especialmente útiles cuando se desea dar estilo a un grupo de elementos de la misma manera, independientemente de sus nombres de etiqueta.

Para seleccionar elementos con una clase específica en tu CSS, utilizas un punto (.) seguido del nombre de la clase. Aquí tienes la sintaxis básica para usar un selector de clase:

.classname {
    property: value;
}

Por ejemplo:

.highlight {
    background-color: yellow;
    color: black;
}

En este ejemplo, el selector de clase .highlight selecciona todos los elementos con la clase "highlight". Las declaraciones establecen el color de fondo en amarillo y el color del texto en negro para estos elementos.

Desafío

Fácil

Se te proporciona un documento HTML con varios elementos, incluyendo encabezados (<h1>, <h2>), párrafos (<p>) y divisiones (<div>). Algunos de estos elementos tienen un atributo class. Tu tarea es usar selectores de clase para dar estilo a estos elementos. Sigue los pasos a continuación:

Agrega un atributo class con el valor "blue-text" al elemento <h1> y al primer elemento <p>.
Agrega un atributo class con el valor "large-text" al elemento <h2> y al segundo elemento <p>.
Escribe una regla CSS usando un selector de clase que apunte a todos los elementos con la clase "blue-text". Establece el color de texto de estos elementos a azul.
Escribe una regla CSS usando un selector de clase que apunte a todos los elementos con la clase "large-text". Establece el tamaño de fuente de estos elementos a 24 píxeles.

Hoja de referencia

El selector de clase selecciona elementos HTML basándose en el valor de su atributo class. Usa un punto (.) seguido del nombre de la clase:

.classname {
    property: value;
}

Ejemplo:

.highlight {
    background-color: yellow;
    color: black;
}

Esto selecciona todos los elementos con class="highlight" y aplica los estilos especificados.

Pruébalo tú mismo

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>