ejercicios html y css | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicios de CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="titulo-blog">Título del Blog</h1>

    <p class="texto-destacado">Este es un texto destacado.</p>

    <p class="urgente">¡Última hora: Se ha producido un importante suceso!</p>

    <p class="parrafo-ejemplo">Este es un párrafo que utilizaremos para probar el modelo de caja.</p>
</body>
</html>

stile.css

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo para título del blog */
.titulo-blog {
    color: #2E8B57; /* Verde marino */
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px; /* Añadido margen inferior para separar del siguiente elemento */
}

/* Estilo para texto destacado */
.texto-destacado {
    color: #FF6347; /* Tomate */
    font-weight: bold;
    margin-bottom: 20px; /* Añadido margen inferior para separar del siguiente elemento */
}

/* Estilo para noticias urgentes */
.urgente {
    color: red;
    font-weight: bold;
    background-color: yellow;
    padding: 10px;
    border: 2px solid red;
    margin-bottom: 20px; /* Añadido margen inferior para separar del siguiente elemento */
}

/* Estilo para párrafo de ejemplo con modelo de caja */
.parrafo-ejemplo {
    margin: 20px;
    border: 2px solid #000;
    padding: 15px;
    width: 300px;
}