How to change background colors by using CSS

HTML elements can have a Background property set. (By elements we mean just about anything between the two BODY tags.) The BODY tag itself can take the Background property. For example, if you wanted a light cream page instead of plain white, you can use the background-color property. Like this:



With this style, the whole of the page will be a different colour. That's because we applied it to the BODY tag itself.

You can also set up a CSS class and just colour a paragraph, with perhaps a border around it:



The result would look like this:



Here, we have a green colour for the text background. The border has 20 pixels of padding between the border and the text. This kind of styling is good for things like callout boxes, when you want to emphasise a particular point. You could even have a fancy callout box, if you experiment with the CSS border properties:



The result of the above code would be this:



Notice how we've used three CSS values with one property:

border-top: 2px #159648 dotted;
border-bottom: 2px #159648 dotted;

We've set a border width, then a colour, then a border style. Each value is separated by a space.