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 do atributo class. Ele permite aplicar os mesmos estilos a vários elementos do seu documento. Os seletores de classe são particularmente úteis quando você quer estilizar um grupo de elementos da mesma maneira, independentemente dos nomes de suas tags.

Para selecionar elementos com uma classe específica no seu CSS, use um ponto (.) seguido do nome da classe. Veja 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>). Nenhum deles tem uma class ainda: primeiro, você adicionará os atributos de classe e, depois, estilizará os elementos com seletores de classe. 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 selecione 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 selecione 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>