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 to change the background color of a web page in HTML (hypertext markup language) and CSS (Cascading Style Sheets). 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. Alternatively, for major colors, specify the names of those colors instead of using the color codes. For example, use red, blue, green, and black instead of 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 CSS code above instead of the body tag. Using CSS styling, change the background-color values once, and the changes are 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, 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 HTML attribute 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 over or click are colored red.