Imagen destacada del artículo Cómo hacer cuadros de colores en html

Cómo hacer cuadros de colores en html

html svgcss svg
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.