Teoría
Teoría

Propiedad background-color

El color de fondo puede establecerse mediante la propiedad CSS background-color.

He aquí un ejemplo de cómo utilizar la propiedad:

selector {
  background-color: #ff0000;
}

Los colores en CSS pueden especificarse en distintos formatos: en hexadecimal, en RGB o RGBA, o con constantes de color como red o green.

Aquí tiene ejemplos de cómo se establece el color rojo de fondo en distintos formatos:

background-color: red;
background-color: #ff0000;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0);

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Propiedad background-color</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> <div class="block block4"></div> </body> </html>

CSS

body { padding: 10px; text-align: center; } .block { display: inline-block; width: 192px; height: 192px; margin: 5px; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { } .block2 { } .block3 { } .block4 { }

ObjetivosRealizado

Establece el color de fondo:

al primer bloque es #2ecc71,
al segundo bloque es #3498db,
el tercer bloque es #e74c3c,
el cuarto bloque es #e67e22.