Cómo hacer cuadros de colores en html

actualizado: 15 / 10 / 2022

En este post aprenderás paso a paso a crear varios cuadrados de diferentes colores html usando css.

1. Crear la estructura html para nuestros cuadrados

html<div class="square blue">Cuadro 1</div>

<div class="square green">Cuadro 2</div>

<div class="square red">Cuadro 3</div>

<div class="square yellow">Cuadro 4</div>

<div class="square black">Cuadro 5</div>

Creamos cinco divs cada uno con el texto cuadro más un número que lo identifique, además de añadirles la clase square y el nombre del color que tendrá cada cuadrado.

2. Agregar ancho y alto a nuestros divs

Sabemos que un cuadrado tiene todos sus lados iguales y para hacer que nuestros divs (cajas) parezcan tengan forma de cuadrado debemos asignarles el mismo ancho y alto.

css.square {
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

La clase square que se repite en todos los divs le damos el mismo ancho y alto de 200px además de algunas propiedades que nos permiten poner el texto en el centro del elemento.

3. Asignar un color a cada cuadrado con css

css.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.black {
  background-color: black;
  color: aliceblue;
}

A cada clase le asignamos el color de fondo correspondiente con la propiedad background-color, en el último cuadrado por ser negro no se puede leer el texto que esta dentro así que cambiamos el color del texto por uno más claro.