Menu
CoddyTech

Seletor de Tipo

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

O seletor de tipo, também conhecido como seletor de elemento ou seletor de tag, seleciona elementos HTML com base em seus nomes de tag. É um dos seletores mais simples e fundamentais no CSS. 

Aqui está a sintaxe básica para usar um seletor de tipo:

tagname {
    property: value;
}
  • tagname: O nome da tag HTML que você deseja estilizar (por exemplo, p, h1, div).
  • property: A propriedade CSS que você deseja definir (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, o seletor de tipo p seleciona todos os elementos <p> (parágrafo) no documento HTML. As declarações definem a cor do texto como azul e o tamanho da fonte como 16 pixels para todos os parágrafos.

challenge icon

Desafio

Fácil

Você recebeu um documento HTML com vários elementos, incluindo títulos (<h1>, <h2>), parágrafos (<p>) e divisões (<div>). Sua tarefa é usar seletores de tipo para estilizar esses elementos. Siga as etapas abaixo:

  1. Escreva uma regra CSS que selecione todos os elementos <h1>. Defina a cor do texto dos títulos <h1> como darkred.
  2. Escreva uma regra CSS que selecione todos os elementos <h2>. Defina a cor do texto dos títulos <h2> como green.
  3. Escreva uma regra CSS que selecione todos os elementos <p>. Defina a cor do texto dos parágrafos como blue e o tamanho da fonte como 18 pixels.
  4. Escreva uma regra CSS que selecione todos os elementos <div>. Defina a cor de fundo das divisões como lightblue.

Experimente você mesmo

<html>
<head>
    <title>Type 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>
    <div>This is a division.</div>
</body>
</html>
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Estilização com CSS

Pratique por conta própria: Playground de Web