Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using colors with CSS

Friday, August 9th, 2013 by Servage

If you had seen the Web back in 1993, you would have found it to be a fairly dreary affair by today’s standards—every background was gray, and all the text was black. Then came Netscape Navigator and, with it, a handful of attributes that allowed rudimentary control over font colors and backgrounds. For years, we made do. But thankfully, we now have style sheet properties that have laid those unmentionable presentational attributes to rest.

Specifying Color Values

There are two main ways to specify colors in style sheets: with a predefined color name, as we have been doing so far:

color: red;                        color: olive;                       color: blue;

or, more commonly, with a numeric value that describes a particular RGB color (the color model on computer monitors). You may have seen color values that look like these:

color: #FF0000;              color: #808000;                  color: #00F;

We’ll get to all the ins and outs of RGB color in a moment, but first, a short and sweet section on the standard color names.

The 17 standard color names in CSS2.1. is shown in the below image.

capture

Color names are easy to use—just drop one into place as the value for any color-related property:

color: silver;
background-color: gray;
border-bottom-color: teal;

There are 140 extended color names in CSS.3.

Foreground Color

The foreground of an element consists of its text and border (if one is specified). Here are the details for the color property.

In the following example, the foreground of a blockquote element is set to a nice green with the values R:80, G:140, and B:25 (we’ll use the hex code #508C19). You can see that by applying the color property to the blockquote element, the color is inherited by the p and em elements it contains. The thick dashed border around the whole blockquote is green as well; however, if we were to apply a border-color property to this same element, that color would override the green foreground setting.

The style rule
blockquote {
border: 4px dashed;
color: #508C19;
}
The markup
<blockquote>
<p>I’d recommend Honey Gold cereal to anyone who likes cereal. It’s
the <em>only</em> way to start the day!</p>
<p>&mdash; Jennifer Robins, happy consumer</p>
</blockquote>

The output is shown below.

capture0000

Background Color

Use the background-color property to apply a background color to any element. A background color fills the canvas behind the element that includes the content area, and any padding (extra space) added around the content, extending behind the border out to its outer edge. Let’s see what happens when we use the background-color property to make the background of the same sample blockquote light blue.

blockquote {
border: 4px dashed;
color: #508C19;
background-color: #B4DBE6;
}

The output image is shown below.

capture0000

As expected, the background color fills the area behind the text, all the way to the border. Look closely at the gaps in the border, and you’ll see that the background color actually goes all the way to its outer edge.

In addition to setting the color of the whole page, you can change the background color of any element, both block-level (like the blockquote shown in the previous example) as well as inline. In this example, I’ve used the color and background-color properties to highlight a word marked up as a “glossary” term.

The style rule
.glossary {
color: #7C3306; /* dark brown */
background-color: #F2F288; /* light yellow */
}
The markup
<p>A <dfn>baseline</dfn> is the imaginary line upon
which characters sit.</p>

The result is shown below.

capture0001

Opacity

The value for opacity is a number between 0 (completely transparent) and 1 (completely opaque). A value of .5 gives the element an opacity of 50%. The opacity setting applies to the entire element—both the foreground and the background. If you want to just affect one or the other, use an RGBa color value instead.

In the following code example, a heading has been given a color of green and a background color of white. When the opacity property is set, it allows the background of the page to show through both the text and the element box.

h1 {color: green; background: white; opacity: .25;}
h1 {color: green; background: white; opacity: .5;}
h1 {color: green; background: white; opacity: 1;}

capture0004

Using colors with CSS, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.