<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Desafio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="titulo-blog">Blog: Hagalo usted mismo</h1>
<p>
En este desafío, se te invita a crear tu propio proyecto web utilizando
HTML, CSS y JavaScript. ¡Es tu oportunidad de mostrar tus habilidades y
creatividad!
</p>
<p class="texto-destacado">
Recuerda seguir las mejores prácticas de desarrollo y mantener un código
limpio y bien documentado.
</p>
<p class="urgente">
¡No olvides entregar tu proyecto antes de la fecha límite!
</p>
</body>
</html>
Al inspeccionar un elemento en las DevTools, se muestra un diagrama del modelo de caja con colores que identifican cada sección:
Content (gris claro): área donde se muestra el contenido del elemento (texto, imágenes, etc.).
Padding (verde): espacio interno entre el contenido y el borde, que empuja el contenido hacia dentro y forma parte del área de fondo.
Border (amarillo): límite que rodea el padding; puede tener grosor, color y estilo.
Margin (anaranjado): espacio exterior entre el borde del elemento y otros elementos cercanos; es transparente y no forma parte del área de fondo.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: beige;
}
.titulo-blog {
color: #0f038f;
font-weight: bold;
}
.texto-destacado {
color: #116ade;
font-weight: bold;
}
.urgente {
color: red;
font-weight: bold;
margin: 10px;
padding: 20px;
border: 1px solid red;
}
