EJERCICIOS_HTML/tarea13.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Párrafos con Bordes y Cabeceras</title>
    <style>
    
        #parrafo1 {
            border: 2px solid black; /* Borde sólido */
            padding: 10px;
            margin-bottom: 20px;
        }

        #parrafo2 {
            border: 2px dashed blue; /* Borde discontinuo */
            padding: 10px;
            margin-bottom: 20px;
        }

        #parrafo3 {
            border: 2px dotted green; /* Borde punteado */
            padding: 10px;
            margin-bottom: 20px;
        }

        #parrafo4 {
            border: 2px double red; /* Borde doble */
            padding: 10px;
            margin-bottom: 20px;
        }

        /* Estilos para las cabeceras */
        #cabecera1 {
            border-bottom: 3px solid red; /* Borde inferior rojo */
            color: red;
            margin-bottom: 10px;
        }

        #cabecera2 {
            border-bottom: 3px solid blue; /* Borde inferior azul */
            color: blue;
            margin-bottom: 10px;
        }

        #cabecera3 {
            border-bottom: 3px solid green; /* Borde inferior verde */
            color: green;
            margin-bottom: 10px;
        }

        #cabecera4 {
            border-bottom: 3px solid purple; /* Borde inferior morado */
            color: purple;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Párrafos con Bordes y Cabeceras</h1>

    <div id="parrafo1">
        <h2 id="cabecera1">Cabecera 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.</p>
    </div>

    <div id="parrafo2">
        <h2 id="cabecera2">Cabecera 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel libero id nisi aliquam varius.</p>
    </div>

    <div id="parrafo3">
        <h2 id="cabecera3">Cabecera 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis metus ut urna ultricies, non dignissim arcu volutpat.</p>
    </div>

    <div id="parrafo4">
        <h2 id="cabecera4">Cabecera 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id velit sit amet velit posuere facilisis.</p>
    </div>
</body>
</html>