Desafio de Recapitulação nº 1
Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 23 de 76.
Desafio
FácilNeste primeiro desafio de recapitulação, você aplicará seus conhecimentos de propriedades de estilização de texto em CSS para recriar um design específico. Este desafio testará sua habilidade 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 você aprendeu nesta seção para estilizar esses elementos. Siga os passos abaixo:
- Escreva uma regra CSS que selecione todos os elementos
<h1>.- Defina a cor para dark blue.
- Defina o tamanho da fonte para 32px.
- Defina o peso da fonte para bold.
- Defina o alinhamento do texto para center.
- Escreva uma regra CSS que selecione todos os elementos com a classe
intro-text.- Defina a cor para gray.
- Defina a font-family para
Arial, Helvetica, sans-serif; - Defina o tamanho da fonte para 18px.
- Escreva uma regra CSS que selecione todos os elementos
<li>.- Defina o font-weight para 600.
- Escreva uma regra CSS que selecione todos os elementos
<a>.- Defina o text-decoration para none.
- Defina a sua font-family preferida para
"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 Styling with CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento de TextoDecoração de TextoDesafio de Recapitulação nº 1Desafio de Recapitulação nº 27Modelo de Caixa Parte 1
O que é o Modelo de Caixa?PaddingMargensBordasLargura e AlturaDesafio de Revisão3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é Flex Box?Flex DirectionJustify ContentAlign ItemsO Centro PerfeitoDesafio de Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta Tag ViewportLayouts FluidosUnidades de ViewportFundamentos de Media QueriesImagens Flexíveis