Cómo hacer cuadros de colores en html

Actualizado : 2023-11-06

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 divsle damos el mismo ancho y alto de 200px además de algunas propiedades que nos permitenponer 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.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi