Desafío de repaso #1
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 23 de 76.
Desafío
FácilEn este primer desafío de repaso, aplicarás tus conocimientos sobre las propiedades de estilo de texto en CSS para recrear un diseño específico. Este desafío pondrá a prueba tu capacidad para combinar varias propiedades de texto, como color, font-family, font-size, font-weight, text-align y text-decoration.
Se te proporciona un documento HTML con varios elementos. Tu tarea es aplicar diferentes propiedades que has aprendido en esta sección para dar estilo a estos elementos. Sigue los pasos a continuación:
- Escribe una regla CSS que afecte a todos los elementos
<h1>.- Establece el color a dark blue.
- Establece el tamaño de fuente a 32px.
- Establece el grosor de fuente a bold.
- Establece la alineación del texto a center.
- Escribe una regla CSS que afecte a todos los elementos con la clase
intro-text.- Establece el color a gray.
- Establece el font-family a
Arial, Helvetica, sans-serif; - Establece el tamaño de fuente a 18px.
- Escribe una regla CSS que afecte a todos los elementos
<li>.- Establece el font-weight a 600.
- Escribe una regla CSS que afecte a todos los elementos
<a>.- Establece el text-decoration a none.
- Establece la fuente a tu font-family preferida a
"Times New Roman", Times, serif.
Pruébalo tú mismo
<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 las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles