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 según el valor de su atributo class. Te permite aplicar los mismos estilos a varios elementos de tu documento. Los selectores de clase son especialmente útiles cuando quieres aplicar el mismo estilo a un grupo de elementos, independientemente de sus nombres de etiqueta.

Para seleccionar elementos con una clase específica en tu CSS, usa un punto (.) seguido del nombre de la clase. Esta es 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 da un documento HTML con varios elementos, incluidos encabezados (<h1>, <h2>), párrafos (<p>) y divisiones (<div>). Ninguno tiene todavía una class: primero añadirás los atributos de clase y después aplicarás estilos a los elementos con selectores de clase. Sigue estos pasos:

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 con un selector de clase que apunte a todos los elementos con la clase "blue-text". Establece en azul el color del texto de estos elementos.
Escribe una regla CSS con un selector de clase que apunte a todos los elementos con la clase "large-text". Establece en 24 píxeles el tamaño de fuente de estos elementos.

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>