How to change the background and text color of a web page

Updated: 05/21/2018 by Computer Hope
Examples of colors

Below are the steps on how you can change the background color of a web page in HTML and CSS. Although the background color can be done with the HTML BODY tag, we recommend you specify the background color values in CSS as shown below.

Tip

When defining the color of any web page element, you may need to use HTML color codes. For major colors, you can also specify the names of those colors instead of using the color codes, for example, red, blue, green, and black instead of using their respected color code values.

CSS example

In the CSS example below, we are setting the body to have a background color of black by adding "background-color: #000;" in the body block. Because the background color is black, the color of the text must be changed to a lighter color, or it won't be visible. So, we are setting the text color to white by adding "color:#fff;" into the block.

body {
  font-family:Helvetica,Arial,sans-serif;
  background-color:#000;
  color:#fff;
}

If the page is not using CSS, below are steps on accomplishing the same styling in the BODY tag of the HTML. However, as mentioned earlier we highly recommend using the above CSS code instead of the body tag. If you use CSS styling, you can change the background-color values once, and the changes will be automatically applied to all HTML elements using that style.

HTML body tag example

In some very rare situations, it may not be possible to use CSS. For those situations, you can also define the background color, text color, link color, and other values in the HTML body tag as shown below.

<BODY TEXT="#092d07" LINK="#1FOOFF" VLINK= "#000000" ALINK="#000000" BGCOLOR="#ffffff">

Below are the descriptions of each of the HTML attributes in the body tag.

TEXT = The color of text.
LINK = The color of links.
VLINK = Visited link color.
ALINK = Color of the active link, or the color the link changes to when clicked.
BGCOLOR = The page background color.

Tip

On this page, the link color is blue, the links you already visited are purple, and links you hover or click are colored red.