Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

CSS Color Properties

Launch your template.html file and save as a new file. For example, firstcss.html or css-color.html.

Your new file should already include all the necessary coding, but make sure to edit the title text. If you need a refresher on the template coding, please return to the "Must Have xhtml Tags" and "Embedded CSS" tutorials.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Debbie’s First CSS Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

<!--



-->

</style> 

</head>

<body>

</body>

</html>

Remember all embedded css rules should be typed in between the opening comment  comment.

CSS Properties: color and background-color

To review, the syntax of a basic CSS rule is
selector {property: value;}

In this tutorial, two new CSS properties will be introduced.

The CSS property color is used to define the text color of an element and background-color is used to define the background color of an element. Both these properties are often found together, since there are many instances when it is important to define a background color when color is defined.

Adding an Embedded Rule

With your new file open in a text editor, let’s add an embedded rule.

body {background-color: #FFE4B5;}

This rule tells the browser that a background-color with the value of #FFE4B5 (moccasin) will be applied to the body tag.

Take notice of the (-) hyphen in the background-color property. A few more CSS properties will also include (-) hyphens in their name.

<style type="text/css">

<!--

body {background-color: #FFE4B5;}

-->

</style>

</head>

Keep in mind, that you must use the {braces} to enclose the declaration and double check that the colon (:) and semi-colon (;) are used properly.

After the rule is typed, save the file, then take a look at it in a browser. Do you like the background color on your blank web page?

Okay, what’s next? How about some color for text?

Combining Declarations

Remember, css rules are comprised of a selector and declaration.

The selector is the (x)html tag element
A declaration is comprised of a CSS property and value.
Each selector can have more than one declaration
One or more declarations form what is called a declaration block.

Add the new color declaration right after the background-color. Make sure a semi-colon (;) is added after each and every declaration. (Technically, the last declaration doesn’t need the trailing semi-colon, but it is a good habit.)

There are several ways to compose your CSS rules; it is a personal preference.

You can type the full declaration block on one line, but this could become troublesome to edit later.

<style type="text/css">

<!--

body {background-color: #FFE4B5; color: #2F4F4F;}

-->

</style>

</head>

Alternatively, each declaration can be typed on its own line. Some even type the opening and closing braces { } on separate lines. This allows easier viewing and editing later.

<style type="text/css">

<!--

body {

background-color: #FFE4B5;

color: #2F4F4F;

}

-->

</style>

</head>

Add a heading or two and a few random paragraphs to your page, then save and view in a browser.

The background of your page will be light moccasin tan and all text will be dark slate. View my firstcss.html file.

Adding More CSS Rules

CSS rules for background and color are easy to define for any element. Each of the tags on a web page can be listed as a selector and the color and/or background-color properties can be applied.

<style type="text/css">

<!--

body {

background-color: #FFE4B5;

color: #2F4F4F;

}

h1 {

color: #000000;

}

h2 {

color: #000000;

}

p {

background-color: #ffffff;

}

-->

</style>

</head>

Combining CSS Selectors

Did you notice that both the h1 and h2 selectors are defined with the same color hex code? If we combine the two, we can save time and file space.

<style type="text/css">

<!--

body {

background-color: #FFE4B5;

color: #2F4F4F;

}

h1, h2 {

color: #000000;

}

p {

background-color: #ffffff;

}

-->

</style>

</head>

Because we listed two selectors, the declaration will be applied exactly the same to both. When combining selectors, always include a comma in between each one.

View your file in a browser. The text in the h1 and h2 tags should display as black.

Please view my firstcss-2.html file for a closer look. (Note: yeah, I know the paragraphs with white backgrounds are not that attractive, but you get the point that backgrounds can be used with any element.)

What do you want to learn next? « Embedded CSS CSS Validation »

5 Comments

Comment by Lionel G. Evans on September 26th, 2006

Hello Debbie T,

Could you please inform me if it would be possible to download a colour palette made up of neon colours?

I have been searching for it on the Internet but have been unsuccessful. I am a PhD student and trying to draw a colourful disability based model to be used within my dissertation. The Microsoft palette is just too dull.

Kind Regards
Lionel
Comment by debbie T on September 26th, 2006

Hello Lionel. I just did a search myself for “neon color palette” and I found many sites.

Here is one in particular with 3 great jpg color palettes.

http://www.neonshop.com/krypton/colors.html
Comment by Wieger on July 6th, 2007

Hi Debbie,

I am new in business of web page development. Whrer do I find a color palette that gives to “codes of color” i.e. #FFE4B5
Comment by debbie T on July 6th, 2007

Hello Wieger!

Did you check my other tutorial on color

There are a few resources listed there!

Have fun!
Comment by llewelyn Tudor on May 16th, 2008

Hi Debbie
I’ve downloaded colorcop but I don’t know how to use it. Can you help?
Best regards
Llew Tudor

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.