This article was written by Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for wikiHow. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities.
This wikiHow teaches you how to set the background color of your website using Cascading Style Sheets (CSS). To set the background color of an entire page, you'll need to use the background-color property inside of the body element. You can then define the background color by name (e.g., red), a hexadecimal value (e.g., #ff0000), or an RGB value (e.g., rgb(255,0,0).
Steps
-
1Open your CSS file. If you have a style sheet that's separate from your HTML code (it'll end in .css), open that file in any text editor. If you're embedding your CSS within an HTML file, open that file instead.
-
2Add the background-color property to the body element. Here's how:
body { background-color: lightblue; }
- You can use colors like "red" or "lightblue," as well as HEX values (like "#ff0000) or RGB values (like RGB(255,0,0)). For a list of colors you can use that will work well on nearly all browsers and platforms, check out https://htmlcolorcodes.com/color-chart/web-safe-color-chart.
- If you want to set the background color of a different element, such as the background of a header or a <div> element), you can use the background-color property for those, too:
h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; }
- If you want to change the opacity of the background color, use
opacityparameter so your code looks like:div { background-color: green; opacity: 0.3; }
Advertisement -
3Save your CSS file. If you were editing the file on your web server, your changes will take effect immediately. But if you were working on a file that's saved to your computer, test your changes in a web browser to see how they look, and then upload your edited file(s) to make your new background color live.[1]Advertisement
About This Article
1. Open your CSS file.
2. Insert the background-color tag.
3. Save your CSS file.
