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.
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.
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.
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:
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.
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-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Change the Background Colour of a Web Page in CSS (HTML/CSS)
