Desafio de Revisão nº 1
Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 23 de 76.
Desafio
FácilNeste primeiro desafio de revisão, você aplicará seu conhecimento sobre propriedades de estilização de texto em CSS para recriar um design específico. Este desafio testará sua capacidade de combinar várias propriedades de texto, como color, font-family, font-size, font-weight, text-align e text-decoration.
Você recebeu um documento HTML com vários elementos. Sua tarefa é aplicar diferentes propriedades que aprendeu nesta seção para estilizar esses elementos. Siga as etapas abaixo:
- Escreva uma regra CSS que selecione todos os elementos
<h1>.- Defina a cor como azul-escuro.
- Defina o tamanho da fonte como 32px.
- Defina o peso da fonte como negrito.
- Defina o alinhamento do texto como centralizado.
- Escreva uma regra CSS que selecione todos os elementos com a classe
intro-text.- Defina a cor como cinza.
- Defina a família da fonte como
Arial, Helvetica, sans-serif; - Defina o tamanho da fonte como 18px.
- Escreva uma regra CSS que selecione todos os elementos
<li>.- Defina o peso da fonte como 600.
- Escreva uma regra CSS que selecione todos os elementos
<a>.- Defina a decoração do texto como nenhuma.
- Defina a fonte como sua família de fontes preferida:
"Times New Roman", Times, serif.
Experimente você mesmo
<html>
<head>
<title>Recap Challenge #1</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>Discovering the Ocean</h1>
<p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
<h2>Marine Life</h2>
<ul>
<li>Whales</li>
<li>Octopuses</li>
<li>Coral Reefs</li>
</ul>
<p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>
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