How to Set the Background and Foreground Color In HTML

How to Set the Background and Foreground Color

In web design, the foreground color usually refers to the text color, and the background color is the page color. For a stunning visual example, the doohickey on the right shows the foreground color in yellow while the background color is purple. OK, maybe it isn't so stunning, but it's better than a poke in the stick with a sharp eye.

When coding the foreground color (text color), the term color is used to specify the CSS property. This differs from the background color, which uses the hyphenated term of background-color.

In the code example that follows, how to set the foreground and background colors for an entire web page is demonstrated:

body {color: # DAD9C2;
      background-color: #4D3722;}

With that in your external style sheet, any web page linked to that style sheet would have the text displayed in a dark brown color on a cream colored background unless it was overridden by an inline or embedded style, or a user style sheet.

Now you know how to add text color and background color to a web page. You can apply the color and background-color properties to any HTML element, although it doesn�t make a lot of sense for some elements and odd uses may not be supported by all browsers. Common uses include paragraphs, divisions, spans, tables, table data cells, headings, and of course, with the body element as shown above.

As with any CSS, you can also add the color and background color to any element using inline and embedded styles, as well as via an external style sheet. To make sure you understand the concept, we�ll add foreground and background colors to few more selectors to go with the body selector from the previous example:

Embedded or External Styles
h1 {color: #D77BA9;}
h2 {background-color: #E97443;}

Inline Style
<p style="background-color: burlywood;"> content </p>

With the first example I�ve changed the text color for h1 heading element. In the second example I've changed the background color for an h2 heading element. In the last example I've used an inline style rule to change the background color to "burlywood" in a paragraph.

• Tweet
• Share
• Share
• Share
• Share

About Admin

Hi EveryOne! The Guy behind this blog is called “Mehboob Ahmed”. By Profession I’m a Web Designer, Computer Teacher, Blogger and SEO Optimizer. I’m not having an educational degree or something like that but, I’m the one who has done everything whatever He wanted to do. I learnt computer from teachers, from Internet and from books and became teacher in very less time.

Related Post