Designating Background Colors Using CSS

In HTML we designated a background color for our documents at the beginning of the page. Using CSS, we can now designate a series of different background colors for different elements using the background-color style designation.

The background-color attribute can be applied to any font containing element, including divs, tables, paragraphs, and headings. We can also designate a default background-color for our entire document.

Let's take a look at some CSS background color style settings.

h1	{background-color:yellow;}
div	{background-color:#903bc0;}
ol	{background-color: rgb(10%,0%,80%);}
ul	{background-color: #F0F;}
p	{background-color: rgb(195,119,121);}

Notice that background colors may be called using the same color values (named colors, Hex codes, RGB percentage arrays, Short Hex, and RGB value arrays) as font colors. If you need a refresher on those different color values, hop on over to the CSS Coloration Tutorial

Setting different background colors for different elements can help give your page a more organized and professional look. Just to give you an example of this look, let's go ahead and look at some color background implementations. The first will be an h1 heading, the second, an unordered list

Using CSS to Change Background Colors

• Makes Pages Easier to Navigate
• Makes Sites More Professional Looking
• Helps to Better Organize Your Page

You should now be able to specify background-colors using CSS by calling named colors, Hex codes, RGB percentages and arrays, and short Hex codes.