HTML Background Color with CSS

Q: How do I set the background color of an HTML page?

Use CSS such as body { background-color: #ffffff; }.

Q: Is the bgcolor attribute still valid?

The old bgcolor attribute is obsolete for modern HTML. Use CSS instead.

Q: How do I set text color on the page?

Use the CSS color property, for example body { color: #222222; }.

Q: How do I change link colors?

Use CSS selectors such as a, a:visited, a:hover and a:focus rather than old body attributes.

Set a page background color with CSS using the background-color property. The old HTML attributes such as bgcolor, text, link, vlink and alink on <body> are obsolete and should not be used in new HTML.

<!doctype html>
<html>
<head>
<style>
body {
  background-color: #ffffff;
  color: #000000;
}
</style>
</head>
<body>
Page content
</body>
</html>

Here #ffffff is white and #000000 is black. You can choose other values from the HTML color chart.

Show Table of Contents

Set the Page Background Color
Set Text and Link Colors
Color Value Formats
Legacy Body Color Attributes
Accessibility and Contrast
Common Mistakes
Related Tutorials
FAQs

Set the Page Background Color Top ↑

The simplest modern method is to apply background-color to the body element.

<style>
body {
  background-color: #f5f7fa;
}
</style>

You can also place the declaration in an external stylesheet. That is usually preferable when several pages share the same design.

Set Text and Link Colors Top ↑

Use CSS instead of the old text, link, vlink and alink body attributes.

<style>
body {
  background-color: #000000;
  color: #ffffff;
}
a {
  color: #ff6b6b;
}
a:visited {
  color: #d9a7ff;
}
a:active {
  color: #ffd166;
}
</style>

This produces the same general idea as the original black-background, white-text example, but uses current HTML and CSS rather than obsolete body attributes.

Black background and white text example Top ↑

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Black Background Demo</title>
<style>
body {
  background-color: #000000;
  color: #ffffff;
}
a { color: #ff5555; }
</style>
</head>
<body>
Welcome to <a href="https://www.plus2net.com/">plus2net.com</a>
</body>
</html>

Legacy demo: The original black background and white text demo is preserved for reference. It uses old body color attributes, so treat it as historical HTML rather than recommended markup.

Color Value Formats Top ↑

CSS accepts several color formats. Hex values are common, but named colors, RGB and HSL are also valid.

<style>
.hex   { background-color: #1e90ff; }
.name  { background-color: gold; }
.rgb   { background-color: rgb(30 144 255); }
.hsl   { background-color: hsl(210 100% 56%); }
</style>

For interactive color selection and examples, see the HTML color chart.

Legacy Body Color Attributes Top ↑

Older HTML pages commonly used attributes directly on <body>:

<!-- Legacy HTML: do not use for new pages -->
<body bgcolor="#000000" text="#ffffff" link="#ff0000" vlink="#800080" alink="#ff0000">

These presentational attributes are obsolete. CSS separates content structure from presentation and gives you better control over hover, focus, visited states, responsive design and reusable site-wide styling.

The original page also used an HTML 3.2 doctype. New pages should use the short HTML5 doctype:

<!doctype html>

Accessibility and Contrast Top ↑

Background and text colors should have enough contrast to remain readable. Do not rely on color alone to communicate meaning, such as using only red and green to show error and success states.

Links should remain easy to distinguish from surrounding text, and keyboard focus should remain visible. If you customize link colors, check normal, visited, hover and focus states together.

Common Mistakes Top ↑

Using bgcolor on body Top ↑

Use CSS background-color instead of the obsolete bgcolor attribute.

Using body link attributes Top ↑

Style links with CSS selectors such as a, a:visited, a:hover and a:focus.

Choosing colors only by appearance Top ↑

A visually attractive combination can still be difficult to read. Check contrast and state visibility.

Repeating inline colors on every element Top ↑

Reusable CSS classes or an external stylesheet are easier to maintain than repeating inline styles throughout a page.

HTML Color Chart CSS for Body Background Color and Image Table Background Image HTML Body Element HTML Page Structure

Frequently Asked Questions Top ↑

Q1: How do I set the background color of an HTML page?

Use CSS such as body { background-color: #ffffff; }.

Q2: Is the bgcolor attribute still valid?

The old bgcolor attribute is obsolete for modern HTML. Use CSS instead.

Q3: How do I set text color on the page?

Use the CSS color property, for example body { color: #222222; }.

Q4: How do I change link colors?

Use CSS selectors such as a, a:visited, a:hover and a:focus rather than old body attributes.

Q5: Can I use color names instead of hex values?

Yes. CSS supports named colors as well as hex, RGB, HSL and other modern color formats.

Q6: Should background and text colors meet accessibility requirements?

Yes. Use sufficient contrast, keep focus states visible and do not rely on color alone to convey meaning.

Legacy Black Background Demo Table Background Image CSS Body Background
Meta Tags Body Background Color
HTML Page Structure