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.

Folha de consulta

Os seletores CSS são padrões usados para selecionar os elementos HTML que você deseja estilizar. Eles determinam a quais elementos os estilos serão aplicados.

Estrutura básica de uma regra CSS:

selector {
    property: value;
}

selector: Alveja os elementos HTML a serem 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)

Exemplo visando todos os elementos de parágrafo:

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

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>