Ejercicios - Estilo texto 1 - HTML & CSS: Curso práctico avanzado

Ejercicios - Estilo texto 1

Enunciado

A partir de la página web que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:

El tipo de letra de la página es Arial, con el tipo de respaldo Verdana.
El encabezado de nivel 1 utiliza el tipo de letra Georgia, con un tamaño de letra de 32 px y en versalitas.
El encabezado de nivel 2 utiliza el tipo de letra Georgia, con un tamaño de letra de 24 px, en cursiva y en versalitas.
Los títulos de los elementos de las listas aparecen en negrita.
El contenido de los elementos de las listas, aunque están etiquetados como <strong>, no se visualizan en negrita.

Nota: no puedes modificar el código HTML de la página, sólo puedes añadir las reglas CSS necesarias para lograr la presentación deseada.

Código base

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>

<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>

<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>

</body>
</html>

Solución

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>
body {
  font-family: Arial,Verdana,sans-serif;
}

h1 {
  font-family: Georgia,Times,serif;
  font-size: 32px;
  font-variant: small-caps;
}

h2 {
  font-family: Georgia,Times,serif;
  font-size: 24px;
  font-style: italic;
  font-variant: small-caps;
}

li  {
  font-weight: bold;
}

strong {
  font-weight: normal;
}
</style>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>

<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>

<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>

</body>
</html>