Os comparto un ejercicio que he creado para practicar las propiedades del modelo de cajas en CSS. Se practicaran propiedades como el borde, relleno, margen, anchura y algunas propiedades de texto como: interlineado, color de fuente, alineación de texto, estilo de fuente …
Este es el HTML base para realizar el ejercicio
<!DOCTYPE html>
<html>
<head>
<title>Modelo de cajas y textos</title>
<meta charset="UTF-8" />
<style>
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
Este es el enunciado del ejercicio:
Para el primer parrafo, color de fuente #2d6921, borde de 3px dotted y color #d66f0f, anchura de 500px, fuente en negrita, relleno en los cuatro lados de 20px, texto alineado a la derecha y un margen inferior de 100px.
Para el segundo parrafo, borde de 3px solido y color azul, anchura 500px, centrado automáticamente, relleno a los cuatro lados de 50px y la fuente en cursiva.
Para el tercer parrafo, anchura del 30%, borde de 6px outset y color #666, relleno a los cuatro lados de 10px, texto justificado y un interlineado de 30px.
Para el cuarto parrafo, anchura del 75%, borde superior de 3px solido y color #f0377b.
Esta es la apariencia del ejercicio solucionado
Este es el código de la solución:
<!DOCTYPE html>
<html>
<head>
<title>Modelo de cajas y textos</title>
<meta charset="UTF-8" />
<style>
.primero{
color: #2d6921;
border: 3px dotted #d66f0f;
width: 500px;
font-weight: bold;
padding: 20px;
text-align: right;
margin-bottom: 100px;
}
.segundo{
border: 3px solid blue;
width: 500px;
margin: auto;
padding: 50px;
font-style: italic;
}
.tercero{
width: 30%;
border: 6px outset #666;
padding: 10px;
text-align: justify;
line-height: 30px;
}
.cuarto{
width: 75%;
border-top: 3px solid #f0377b;
}
</style>
</head>
<body>
<p class="primero">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p class="segundo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p class="tercero">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p class="cuarto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>