Desafío de repaso n.º 1
Parte de la sección Estilos con 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 seleccione todos los elementos
<h1>.- Establece el color en azul oscuro.
- Establece el tamaño de fuente en 32px.
- Establece el grosor de fuente en negrita.
- Establece la alineación del texto en el centro.
- Escribe una regla CSS que seleccione todos los elementos con la clase
intro-text.- Establece el color en gris.
- Establece la familia de fuentes en
Arial, Helvetica, sans-serif; - Establece el tamaño de fuente en 18px.
- Escribe una regla CSS que seleccione todos los elementos
<li>.- Establece el grosor de fuente en 600.
- Escribe una regla CSS que seleccione todos los elementos
<a>.- Establece la decoración del texto en none.
- Establece la fuente en tu familia de fuentes preferida:
"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 Estilos con CSS
4Fundamentos del texto
Color del textoFamilia tipográficaTamaño de fuentePeso de la fuenteAlineación del textoDecoración del textoDesafío de repaso n.º 1Desafío de repaso n.º 27Modelo de caja, parte 1
¿Qué es el modelo de caja?RellenoMárgenesBordesAncho y altoDesafío de repaso8Modelo de caja, parte 2
Dimensionamiento de cajasRadio del bordeDesbordamientoSombra de cajaDesafí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 un Flex Box?Dirección de FlexJustificar el contenidoAlinear elementosEl centro perfectoDesafío de Flex Box12Fundamentos del diseño responsive
¿Qué es el diseño responsive?Etiqueta meta viewportDiseños fluidosUnidades del viewportFundamentos de las media queriesImágenes flexiblesPractica por tu cuenta: Playground de Web