Background Color in HTML Code (W3Schools)
The background color of an HTML element is defined using the background-color property in CSS. This property can be applied to various elements, including the <body>, <div>, <p>, and <span> elements.
Setting Background Color
To set the background color, you can use an inline style, an internal stylesheet, or an external stylesheet. Here are examples of each:
1. Inline Style:
This paragraph has a light blue background.
2. Internal Stylesheet:
This paragraph inherits the body's background color.
3. External Stylesheet:
/* style.css */
body {
background-color: lightgrey;
}
This paragraph inherits the body's background color.
Color Values
You can specify the background color using different color values:
- Color Names: Use predefined color names like "red", "blue", "green", "black", "white", etc.
- Hexadecimal Colors: Use hexadecimal color codes like "#FF0000" for red, "#0000FF" for blue, and "#00FF00" for green.
- RGB Colors: Use RGB values like "rgb(255, 0, 0)" for red, "rgb(0, 0, 255)" for blue, and "rgb(0, 255, 0)" for green.
- HSL Colors: Use HSL values like "hsl(0, 100%, 50%)" for red, "hsl(240, 100%, 50%)" for blue, and "hsl(120, 100%, 50%)" for green.
Example: Setting Different Background Colors
This is a Heading
This is a paragraph.
This example sets the background color for the body, the heading, and the paragraph elements. The heading also has a white color and is centered with padding.
Further Exploration
- W3Schools Background Color Reference:
- CSS Color Values:
This tutorial provides a basic understanding of how to set background colors in HTML code using CSS. You can experiment with different color values and apply them to various HTML elements to create visually appealing web pages.