El documento presenta 5 ejercicios de estilos CSS para aplicar a diferentes elementos HTML. Cada ejercicio describe el código HTML inicial y la apariencia final deseada, solicitando definir el estilo CSS correspondiente.
1. Ejercicio 1) A partir del siguiente código HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 >
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>
define un estilo CSS para que este quede con la siguiente apariencia:
Ejercicio 2) A partir del siguiente código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
</head>
<body>
<h1>Titulo de nivel 1</h1>
<h2>Titulo de nivel 2</h2>
</body>
</html>
define un estilo CSS para que este quede con la siguiente apariencia:
2. Ejercicio 3) A partir del siguiente código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="pregunta">¿Quién descubrió América y en que año fue?</p>
<p class="respuesta">Colón en 1492</p>
</body>
</html>
define un estilo CSS para que este quede con la siguiente apariencia:
Ejercicio 4) A partir del siguiente código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
</head>
<body>
<p class="comentarios">Esto es una prueba para ver el funcionamiento de la propiedad
padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
3. Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
</p>
</body>
</html>
define un estilo CSS para que este quede con la siguiente apariencia:
Nota: Padding inferior y superior 30px,izquierda y derecha 5px
Ejercicio 5) A partir del siguiente código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
</head>
<body>
<h1 class="tituloprincipal">Propiedad border</h1>
<p class="comentarios">Debemos indicar el border-width border-style border-color</p>
</body>
</html>
define un estilo CSS para que este quede con la siguiente apariencia:
Nota: El borde rojo es de 5px y el azul de 1 px.