How to Create Background Colors on a Web Page
All modern Web browsers display Web pages with white backgrounds by default. In the past, you needed to add the background color in the <body> tag of every page. Cascading Style Sheets (CSS) make it possible to specify a background color for every page in your website using one file. You can use hexadecimal codes for exact colors or use names for any one of the 256 Web-safe colors available. You can link CSS to your HTML files for multiple Web pages.
Other People Are Reading
Instructions
-
-
1
Open the HTML files of your website in a code editor, such as Notepad++, BBEdit or jEdit. Add the following code between the <head> and </head> tags for every HTML file where you see them:
<link rel="stylesheet" href="style.css" type="text/css" />
The above code "links" a style sheet file to every HTML file that has <head> tags. When you add background colors to your style sheet, every page in your website will display with those colors.
-
2
Create a blank file and save it as "style.css." Add the following code:
body { background-color: black; }
This CSS code gives an entire Web page a black background. Change "black" to the name of a basic color or use a hexadecimal code:
body { background-color: #cccccc; }
-
-
3
Add background colors to any HTML element using the following CSS format:
tagname { background-color: #cccccc; }
.class-name { background-color: #cccccc; }
#id-name { background-color: #cccccc; }
Prefix class names with a period and ID names with a hash sign. The tag name is the name of a tag, such as "body" or "div." Find the class name or ID name of a tag by looking in the HTML. Here is an example of a tag with both an ID and a class:
<div id="left-sidebar" class="sidebar"></div>
-
1
Tips & Warnings
To use CSS within a single HTML file, you can put it within <style> and </style> tags instead of a separate, linked file. The <style> tags belong between <head> and </head> tags.
Use a color-picker website to find the hexadecimal codes for colors.
References
Resources
- Photo Credit Jupiterimages/Brand X Pictures/Getty Images
