Vamos a replicarlo

Hasta ahora hemos aprendido cómo utilizar algunas de las propiedades básicas de CSS, como lo son:

• color
• background-color
• font-family
• font-size
• text-align
• border
• margin
• padding
• width
• height

Ejercicio 1

Tratemos de replicar este ejemplo. Se trata de un título con una fuente diferente.

¿Qué reglas de CSS crees que debamos usar?

<h1>Un título con otra font</h1>

h1{
    font-family: Arial, sans-serif;
}

Ejercicio 2

Este ejercicio solo consta de un elemento con algunas reglas CSS.

¿Qué reglas de CSS crees que debamos usar?

<div></div>

div{
    width: 100px;
    height:100px;
    background-color:aquamarine;
}

Ejercicio 3

Este ejercicio consta de dos párrafos y sólo una propiedad de CSS.

¿Qué regla crees que debamos usar?

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem repellendus cumque delectus officia mollitia eligendi doloribus expedita dolore maiores in temporibus, molestias est dolores, quidem nam facilis nulla. Excepturi, molestiae!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem repellendus cumque delectus officia mollitia eligendi doloribus expedita dolore maiores in temporibus, molestias est dolores, quidem nam facilis nulla. Excepturi, molestiae!</p>

p{
    font-size: 12px;
}

Ejercicio 4

Este ejercicio consta de tres párrafos y algunas clases. Editamos la misma propiedad para cada clase pero con diferentes valores.

<p class="izquierda">Alineado a la izquierda</p>
<p class="centro">Alineado al centro</p>
<p class="derecha">Alineado a la derecha</p>

.izquierda{
    text-align: left;
}
.centro{
    text-align: center;
}
.derecha{
    text-align: right;
}

Ejercicio 5

Este ejercicio utiliza 3 etiquetas <span> y algunas reglas de CSS. La más importante es margin. Las demás sólo existen para hacer este concepto más evidente.

<span>Uno</span>
<span>Dos</span>
<span>Tres</span>

span {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 4px 8px;
}

Ejercicio 6

Este ejercicio modifica un gran número de propiedades. Tratemos de averiguar cuáles son. Usamos 6 reglas en total.

Comentarios