Introdução aos Seletores

Parte da seção Styling with 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: Define os elementos HTML que serão estilizados.
property: O atributo de estilo que você deseja alterar (ex: color, font-size).
value: O valor que você deseja definir para a propriedade (ex: 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 (background color) de todos os cabeçalhos h1 como green.
Defina a cor do texto de todos os cabeçalhos h1 como white.
Defina o tamanho da fonte (font size) 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>