Color de fondo

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 25 de 76.

En CSS, la propiedad background-color se utiliza para establecer el color de fondo de un elemento HTML. Esta propiedad le permite especificar un valor de color.

Aquí tienes la sintaxis básica para usar la propiedad background-color:

selector {
    background-color: color-value;
}

Aquí hay algunas formas comunes de especificar valores de color en CSS:

Colores con nombre: Nombres de colores predefinidos, como red, blue, green, black, white, etc.

Valores hexadecimales: Códigos de color de seis dígitos precedidos por un símbolo de almohadilla (#), como #FF0000 para el rojo.

Valores RGB: Especifica los componentes rojo, verde y azul de un color utilizando la función rgb(), con valores que van de 0 a 255, como rgb(255, 0, 0) para el rojo.

Por ejemplo:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

En este ejemplo, el color de fondo del elemento <body> se establece en lightblue, todos los encabezados <h1> tienen un fondo rojo (#FF0000), todos los elementos <p> (párrafo) tienen un fondo azul (rgb(0, 0, 255)).

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es usar la propiedad background-color para dar estilo a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece el background-color a yellow.
Escribe una regla CSS que apunte al elemento <p>. Establece el background-color a #00FF00 (verde).
Escribe una regla CSS que apunte al elemento <div>. Establece el background-color a rgb(255, 0, 255) (magenta).

Hoja de referencia

La propiedad background-color establece el color de fondo de un elemento HTML:

selector {
    background-color: color-value;
}

Los valores de color se pueden especificar utilizando:

Colores con nombre: red, blue, green, black, white
Valores hexadecimales: #FF0000 (rojo)
Valores RGB: rgb(255, 0, 0) (rojo)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

Pruébalo tú mismo

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>