Selector de clase

Parte de la sección Estilos con 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, incluidos encabezados (<h1>, <h2>), párrafos (<p>) y divisiones (<div>). Algunos de estos elementos tienen un atributo class. Tu tarea es utilizar selectores de clase para aplicar estilos a estos elementos. Sigue los pasos que se indican a continuación:

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

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>