How to change the background color of your pages in HTML and CSS
Mar 19th, 2007 by Resident Code Monkey
This tutorial is geared to help you get to know how to change the background color of your web page, using both the traditional HTML approach, and the new improved CSS approach.
Level of Difficulty: Beginner
If you wanted to change the background of the web page to black (hex color code #000000) with traditional HTML you would use the following code to accomplish that:
This method however is outdated, because what if you had 20 or 30 web pages with this code and later on after you had developed all your web pages you decided to change the background color to grey (hex color code #CCCCCC), you would have to go and edit all those pages over again and replace #000000 with #CCCCCC. There is another way you could do this where you could make one change and have all your pages update, this method is the Cascading Style Sheet (CSS) method.
It makes sense to store your CSS in a file you can include on each page, so for this tutorial we will be storing our CSS in a file called stylesheet.css.
In order to change the background color of each page we include the CSS style sheet file on, we would put the following code in the style sheet file.
background-color: #000000;
}
And then include the style sheet file on each page by using the following code, which you would place in the <head> portion of your web page.
So now by using this CSS method you can just open up the stylesheet.css file, and edit the hex color code for black (#000000) and change it to grey (#CCCCCC) and the change would occur on all the pages you have included the CSS style sheet file on, thus making your life much easier in the long run.
There are many things you can change on a web page by using Cascading Style Sheets, I encourage you to read up more on the subject, I will also be writing more tutorials on how you can use CSS to change the way your website looks.
Until next time,
-Resident Code Monkey
Leave a Reply