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.
Desafio
FácilVocê 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:
- Escreva uma regra CSS que selecione todos os elementos
<h1>. Defina a cor do texto dos títulos<h1>como darkred. - Escreva uma regra CSS que selecione todos os elementos
<h2>. Defina a cor do texto dos títulos<h2>como green. - 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. - 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>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
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento do TextoDecoração do TextoDesafio de Revisão nº 1Desafio de Revisão nº 27Modelo de Caixa — Parte 1
O que é o Modelo de Caixa?PreenchimentoMargensBordasLargura e AlturaDesafio de Revisão8Modelo de Caixa — Parte 2
Dimensionamento da CaixaRaio da BordaTransbordamentoSombra da CaixaDesafio de Revisão3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é uma Flex Box?Direção da Flex BoxJustificar conteúdoAlinhar itensO centro perfeitoDesafio da Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta tag viewportLayouts fluidosUnidades de viewportFundamentos das Media QueriesImagens flexíveisPratique por conta própria: Playground de Web