How to Change the Background Colour ("Color") of a Web Page in CSS

HTML/CSS Code for Modifying the Background

How to Change the Background Colour of a Web Page in CSS (HTML/CSS)

by Christopher Heng,

I was asked by a visitor how he could change the background colour ("color" if you use a different variant of English) of a web page. This article answers that question.


My visitor did not specify which web editor he was using, but he did say he wanted to change the background colour "in HTML", so I will assume here that he meant to do it by directly altering the page's code (as opposed to using the user interface of a visual web editor like Expression Web). Since colour changes are modified through a page's Cascading Style Sheets (CSS), this article will deal with the CSS code needed.

In view of this, you will need a bit of knowledge of how to code and insert HTML and CSS before you can understand this tutorial. If you are accustomed to using a visual web editor to do things, you may prefer to look at the equivalent tutorials for those editors instead:

In addition, if you have a blog, you may be able to change the background from within the blog's user interface without having to modify the CSS file for the theme directly.

The Background-Color Property

You can change the background colour of any part of a web page by creating a background-color rule. Take the following code from my Two Column Layout Demo as an example.

body {
  background-color: #ffa500 ;

The above CSS sets the background to the colour value #ffa500, which is a shade of orange (actually, it looks just like plain orange to my eyes, but if I say that, I'm sure some colour expert will write to correct me with the technical name of that shade). Since I specified that the rule is to be applied to the body selector, it will affect the entire page by default, unless it is overridden in specific portions of the page.

In fact, if you were to look at the demo again, you will see that such an override has occurred there, since only the side column and the borders are orange. The main content column is white. To achieve this, I set another background-color rule for that column.

#content {
  background-color: white ;

The column has a CSS id of "content", so the more specific rule above was applied, taking precedence over the general rule for "body".

As you can see, you can add a background-colour rule to any selector on the page, whether it is an HTML tag like <body> or <p>, or an id or a class. If you have a specific paragraph that you want to highlight, you can even just put the rule on the style attribute of that paragraph, like this:

<p style="background-color: black; color: white;">
This paragraph has white text over a black background.

The "color: white;" rule in the above code affects the words in the foreground. I had to insert such a rule because otherwise they will be black by default, rendering them invisible against a background of the same colour.

Note that CSS only recognises ("recognizes") a few colour names. If you are not sure whether the colour you want has an official CSS name, just use the RGB numeric value instead. It's safer, and you don't have to worry about whether such-and-such a browser version supports that particular name. I tend to use numbers for all colours other than a few common ones (eg, white and black), and often even for those (old habits die hard). If your editor does not have a colour picker that automatically generates an RGB numeric value, there is a list of colours on Wikipedia that may be useful.

Browser Support

The background-color property is supported in all browsers in current use. It is even supported in many ancient browsers, including Internet Explorer 6.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Change the Background Colour of a Web Page in CSS (HTML/CSS)

Link to Us
No Spam Policy
Privacy Policy
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.