En este artículo, veremos cómo establecer el color de fondo de un elemento. El propósito de usar el atributo de estilo es agregar estilos a los elementos. El uso del atributo de estilo con diferentes elementos da como resultado un cambio solo en ese elemento. Este atributo se puede utilizar como en línea, interno o externo. El atributo de estilo proporciona una serie de propiedades que se pueden usar para mejorar una página html simple.
El color de fondo se puede cambiar de tres formas:
- Atributo de estilo en línea
- CSS interno
- CSS externo
El HTML5 no admite el atributo ‘ bgcolor’ de la etiqueta <body> , por lo tanto, debemos usar el atributo de estilo en línea y las opciones CSS internas para cambiar el color de una página web. Para CSS interno, agregue la etiqueta <style> al comienzo del archivo html y agregue la etiqueta a la que se aplican los cambios; en este caso, se usa la etiqueta <body>.
Sintaxis:
/* For inline style attribute */
<tag style="property:value">
/* For internal CSS attribute */
<style>
tagName{
property:value;
}
</style>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de CSS en línea.
HTML
<!DOCTYPE html> <html> <!--This line changes the color of background--> <body style="background-color:pink"> <h1 style="color:green;text-align:center;"> GeeksForGeeks </h1> <h3 style="text-align:center;"> How to change color of Background? </h3> </body> </html>
Salida: Esto se mostrará cuando se abra el archivo html en el navegador.
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de CSS interno.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {
color: green;
text-align: center;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h3>
How to change color of
Background?(Using Internal CSS)
</h3>
</body>
</html>
Salida: esto se mostrará cuando se abra el archivo html en el navegador
CSS externo: en CSS externo, creamos un archivo separado que tiene todos los datos de estilo para el archivo html. Almacenar el archivo externamente facilita la aplicación de cambios a la página HTML.
Publicación traducida automáticamente
Artículo escrito por gauravl3hardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA