Desafío de repaso n.º 2
Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 24 de 76.
Desafío
FácilEn este segundo 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, para que coincidan con un diseño dado.
Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>), un enlace (<a>) y una lista desordenada (<ul>) con elementos de lista (<li>). Tu tarea es utilizar las propiedades de estilo de texto que has aprendido para dar estilo a estos elementos de modo que coincidan con el diseño mostrado en la imagen de abajo:

Sigue los pasos a continuación:
- Escribe una regla CSS que apunte al elemento
<h1>. Establece elcolorablack, elfont-familya"Times New Roman", Times, serif, elfont-sizea48px, elfont-weightaboldy eltext-alignacenter. - Escribe una regla CSS que apunte al elemento
<p>. Establece elcoloragray, elfont-familyaArial, Helvetica, sans-serif, elfont-sizea18pxy eltext-alignacenter. - Escribe una regla CSS que apunte al elemento
<a>. Establece elcoloraredy eltext-decorationanone. - Escribe una regla CSS que apunte a todos los elementos
<li>. Establece elcoloragreen, elfont-familya"Courier New", Courier, monospace, elfont-sizea25pxy elfont-weighta600.
Pruébalo tú mismo
<html>
<head>
<title>Recap Challenge #2</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with a <a href="#">link</a>.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</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