Dejo el correspondiente código al ejercicio CU01045D del curso de CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
/* El CSS se encuentra en la pestaña de abajo*/
</style>
</head>
<body>
<div id="caja1"> <!-- Primera caja -->
<p>HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web.</p>
<p>¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar.</p>
</div>
<div id="caja2">
<p>CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.</p>
<p>La filosofía de CSS se basa en intentar separar lo que es la estructura del documento HTML de su presentación. Por decirlo de alguna manera: la página web sería lo que hay debajo (el contenido) y CSS sería un cristal de color que hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras.</p>
<p>Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas típicas etiquetas HTML como (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande). Pero también hay funciones algo más complejas, como introducir espaciado entre elementos (div es una etiqueta HTML para identificar una determinada región o división de contenido dentro de una página web) o establecer imágenes de fondo.</p>
</div>
<div id="caja3">
<p>
La respiración humana, como la de todos los animales terrestres, está basada en la absorción del aire atmosférico que está formada por una mezcla de oxigeno, nitrógeno y dióxido de carbono, así como otros elementos (algunos contaminantes) en diversa proporción. Sin embargo, esta no es la única mezcla respirable por el hombre. De hecho, son harto conocidos los sketches televisivos en que se inhala helio o hexafluoruro de azufre, que si bien son inocuos, producen el efecto secundario de una voz aguda y grave respectivamente. Ahora bien... una cosa es respirar una mezcla diferente de aire y otra muy diferente respirar un líquido como si se tratase de un pez. Pues, aunque le parezca mentira, si se llena sus pulmones de perfluorocarbono puede respirar como si estuviera en la superficie.
</p>
<p>
El ahogamiento, en todos los animales exclusivamente terrestres, se produce cuando los pulmones se llenan de agua y estos no pueden obtener el oxigeno del liquido que los rellena. En este caso, los pulmones no están diseñados para poder extraer el oxígeno de un líquido, de tal forma que bajo el agua dejan de estar operativos y el organismo acaba por morir más temprano que tarde. No obstante, los científicos descubrieron que un compuesto líquido, el perfluorocarbono, tenía la capacidad de ser respirable como si fuera el aire.
</p>
</div>
</body>
</html>
CSS:
*{margin:0; padding:0;}
div{margin:33px;padding:25px; border: 5px solid red; width: 100%;}
#caja1 {font:18px serif;} /* Ahora si tiene sentido */
#caja1 p:nth-of-type(2) {text-variant: small-caps; text-transform: uppercase; font-variant: small-caps; }
#caja2 {font: 14px sans-serif; color:#B22222;}
#caja3 {font: 36px fantasy;}