Seletor de Classe

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 12 de 76.

O seletor de classe é usado para selecionar elementos HTML com base no valor de seu atributo class. Ele permite que você aplique os mesmos estilos a múltiplos elementos em seu documento. Os seletores de classe são particularmente úteis quando você deseja estilizar um grupo de elementos da mesma maneira, independentemente de seus nomes de tag.

Para selecionar elementos com uma classe específica em seu CSS, você usa um ponto (.) seguido pelo nome da classe. Aqui está a sintaxe básica para usar um seletor de classe:

.classname {
    property: value;
}

Por exemplo:

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

Neste exemplo, o seletor de classe .highlight seleciona todos os elementos com a classe "highlight". As declarações definem a cor de fundo como amarela e a cor do texto como preta para esses elementos.

Desafio

Fácil

Você recebeu um documento HTML com vários elementos, incluindo títulos (<h1>, <h2>), parágrafos (<p>) e divisões (<div>). Alguns desses elementos têm um atributo class. Sua tarefa é usar seletores de classe para estilizar esses elementos. Siga as etapas abaixo:

Adicione um atributo class com o valor "blue-text" ao elemento <h1> e ao primeiro elemento <p>.
Adicione um atributo class com o valor "large-text" ao elemento <h2> e ao segundo elemento <p>.
Escreva uma regra CSS usando um seletor de classe que tenha como alvo todos os elementos com a classe "blue-text". Defina a cor do texto desses elementos como azul.
Escreva uma regra CSS usando um seletor de classe que tenha como alvo todos os elementos com a classe "large-text". Defina o tamanho da fonte desses elementos como 24 pixels.

Experimente você mesmo

<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>