Hola a todos !! dejo a continuación el código HTML y CSS del ejercicio propuesto CU01012D del tutorial de programación CSS. Desde ya muchas gracias. Un saludo,
Luis
EJERCICIO
Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:
a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.
b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 150% respecto de lo normal para los elementos cuyo valor class sea <<principal>>.
c) Usando CSS establece como color de texto el verde para los elementos y tamaño de fuente el 110% respecto de lo normal para los elementos cuyo valor class sea <<secundario>>.
d) Usando CSS establece como color de fondo para los párrafos dentro de elementos cuyo atributo class sea <<secundario>> el amarillo (yellow).
Codigo HTML
<!DOCTYPE html>
<!-- ejercicio CU01012D.html -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilosCU01012D.css">
</head>
<body>
<div class="principal">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div class="secundario">
<h3>Lanzamos el producto X-FASHION</h3>
<p class="fondoTexto">Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
</div>
<div class="secundario">
<h3>Mejoramos el producto T-MOTION</h3>
<p class="fondoTexto">Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>
Código CSS
/* Hoja de estilos: estilosCU01012D.css */
/* correspondiente a ejercicioCU01012D.html */
.principal{
color:red; font-size:150%;
}
.secundario{
color:green; font-size:110%;
}
.fondoTexto {
background:yellow;
}