Ejercicio 223

A partir del documento HTML proporcionado, escribe las reglas CSS necesarias para lograr una página web que tenga el mismo aspecto que la siguiente imagen:

Documento HTML base:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Box model</title>
  </head>
  <body>
    <div>
      <p>I am a paragraph. A short one.</p>
      <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
      </ul>
      <p>
        I am another paragraph. Some of the words have been wrapped in a span element.
      </p>
    </div>
  </body>
</html>

Solución

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Box model</title>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <div>
      <p>I am a paragraph. A short one.</p>
      <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
      </ul>
      <p>
        I am another paragraph. Some of the
        <span class="block">words</span> have been wrapped in a span element.
      </p>
    </div>
  </body>
</html>

estilos.css
div {
  border: 1px solid black;
  padding: 1em;
}

p,
ul {
  border: 2px solid rebeccapurple;
  padding: 0.5em;
}

.block,
li {
  border: 2px solid blue;
  padding: 0.5em;
}

ul {
  display: flex;
  list-style: none;
}

.block {
  display: block;
}

Probar en el navegador

Documento HTML