Seletor de Classe

Parte da seção Styling with 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 amarelo e a cor do texto como preto para esses elementos.

Desafio

Fácil

Você recebeu um documento HTML com vários elementos, incluindo cabeçalhos (<h1>, <h2>), parágrafos (<p>) e divisões (<div>). Alguns desses elementos possuem 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 segmente todos os elementos com a classe "blue-text". Defina a cor do texto desses elementos como blue.
Escreva uma regra CSS usando um seletor de classe que segmente todos os elementos com a classe "large-text". Defina o tamanho da fonte desses elementos como 24 pixels.

Folha de consulta

O seletor de classe seleciona elementos HTML com base no valor do seu atributo class. Use um ponto (.) seguido pelo nome da classe:

.classname {
    property: value;
}

Exemplo:

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

Isso seleciona todos os elementos com class="highlight" e aplica os estilos especificados.

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>