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.

Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Top 8 lenguajes backend más usados en la actualidad

Imagen destacada del artículo Top 8 lenguajes backend más usados en la actualidad

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Headless cms (cms sin cabeza) que es y porque deberías usarlo

Imagen destacada del artículo Headless cms (cms sin cabeza) que es y porque deberías usarlo