En este artículo, aprenderemos cómo configurar el color de fondo de diferentes elementos en CSS. La propiedad background-color de CSS se usa para establecer el fondo de un elemento.
Enfoque: la propiedad de color de fondo de CSS se utiliza para establecer el fondo de un elemento. Podemos establecer el color de fondo seleccionando el elemento por su nombre de clase o nombre de identificación y luego aplicarle la propiedad de color de fondo para establecer el color de fondo.
Sintaxis:
background-color: color_name;
Los siguientes ejemplos ilustran el enfoque.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
margin:50px 50px;
font-size: 50px;
}
.gfg1{
background-color: green;
}
.gfg2{
background-color: rgb(163, 158, 158);
color: black;
}
.gfg3{
background-color: rgb(102, 119, 102);
}
</style>
</head>
<body>
<div class="gfg1">
geeksforgeeks in div1
</div>
<div class="gfg2">
geeksforgeeks in div2
</div>
<p class="gfg3"
style="margin:50px 50px; font-size: 50px;">
geeksforgeeks in p
</p>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
margin:50px 50px;
font-size: 50px;
}
.gfg1{
background-color: green;
}
.gfg2{
background-color: rgb(163, 158, 158);
color: black;
margin:50px 50px;
font-size: 30px;
}
.gfg3{
background-color: rgb(102, 119, 102);
}
</style>
</head>
<body>
<div class="gfg1">
geeksforgeeks in div
</div>
<a class="gfg2"
href="https://www.geeksforgeeks.org/">
geeksforgeeks link
</a>
<p class="gfg3"
style="margin:50px 50px; font-size: 40px;">
geeksforgeeks in p
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA