Desafío de repaso #1
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 29 de 76.
Desafío
FácilAhora que has dominado varias técnicas para dar estilo al texto y a los fondos usando CSS, es hora de poner a prueba tus conocimientos con un desafío integral. Aplicarás lo que has aprendido sobre colores, códigos hexadecimales, valores RGB y transparencia con RGBA para crear un diseño específico.
Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es utilizar las propiedades de estilo de texto y fondo que has aprendido para dar estilo a estos elementos de modo que coincidan con el diseño que se muestra en la imagen a continuación:

Sigue los pasos a continuación:
- Escribe una regla CSS que apunte al elemento
<h1>. Establece elcolorawhite, elbackground-colora#000080(azul marino) y eltext-alignacenter. - Escribe una regla CSS que apunte al elemento
<p>. Establece elcolora#FFFFFF(blanco), elbackground-colorargba(0, 0, 0, 0.5)(negro semitransparente) y elfont-sizea18px. - Escribe una regla CSS que apunte al elemento
<div>. Establece elbackground-colorargba(237, 170, 26, 1)(amarillo dorado) y elcolorawhite.
Pruébalo tú mismo
<html>
<head>
<title>Recap Challenge #1</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</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