Introdução aos Seletores

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

No CSS, seletores são padrões usados para selecionar os elementos HTML que você deseja estilizar. Eles são uma parte crucial das regras CSS, pois determinam a quais elementos os estilos serão aplicados.

Existem vários tipos de seletores, cada um visando elementos de maneiras diferentes. Compreender os seletores é fundamental para dominar o CSS e criar páginas web bem estilizadas.

Aqui está uma regra CSS básica com um seletor:

selector {
    property: value;
}

selector: Destina-se aos elementos HTML que serão estilizados.
property: O atributo de estilo que você deseja alterar (por exemplo, color, font-size).
value: O valor que você deseja definir para a propriedade (por exemplo, blue, 16px).

Por exemplo:

p {
    color: blue;
    font-size: 16px;
}

Neste exemplo, p é o seletor, visando todos os elementos de parágrafo. As declarações definem a cor do texto como azul e o tamanho da fonte para 16 pixels para todos os parágrafos.

Desafio

Fácil

Você recebeu um documento HTML. Use CSS interno para estilizar o documento com as seguintes propriedades:

Defina a cor de fundo de todos os títulos h1 como green.
Defina a cor do texto de todos os títulos h1 como white.
Defina o tamanho da fonte de todos os parágrafos (p) como 18px.

Você recebeu um código CSS inicial para isso.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>