CSS color and background tutorial

<pageby nominor="false" comments="false"/>

Learning goals

• Understand CSS 2 and CSS color models
• Be able to user background and font colors

Concurrent

• CSS tutorial
• Computer colors tutorial

Moving on

• CSS positioning tutorial
• CSS for XML tutorial
• DHTML

Level and target population

• Beginners

Teaching materials

• ....

Remarks

• This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

Introduction

Colors

There are two way of defining colors. Either by its name (but the official list only includes 17 colors) or by a so-called RGB value. The latter can be specified in four different ways as we shall show in the example below. The 17 pre-defined color names in CSS 2.1 are the following, according to the CSS 2.1 specification from which we made a screen shot:

The 17 official CSS 2 color definitions

Otherwise, you may choose from several RGB numerical colors specifications as the following example shows. The following example will set the color of a text:

em { color: #f00 }              /* #rgb = Red-Green-Blue shortcut for rrggbb*/
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

In order to set the background-color use something like:

em { background-color: #f00 }              /* #rgb = Red-Green-Blue shortcut for rrggbb*/
em { background-color: #ff0000 }           /* #rrggbb */
em { background-color: rgb(255,0,0) }      
em { background-color: rgb(100%, 0%, 0%) }

E.g. The following CSS code

  <p style="background-color: #0000ff; color: #000000);"> Blue background and white foreground</p>

would show like this:

Blue background and white foreground

CSS 3 implements far more color related properties and values.

In CSS, the hsl value is defined by the position in the color wheel, e.g. red = 0, red = 360, blue=240. Saturation and lightness are represented by percentages. Here are a few examples:

 { color: hsl(0, 100%, 50%) }   /* red */
 { color: hsl(120, 100%, 75%) } /* light green */ 
 { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */

E.g. The following HSL CSS code

  <p style="color: hsl(240,75%,75%);"> Kind of not so blue</p>

would show like this (your browser may not support this):

Kind of not so blue

In CSS (if your browser supports it), you also can define the alpha channel. You may use so-called RGBA values using the % notation, i.e.

  p { background-color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */

The following RGBA CSS inline code

  <p style="float:right; background-color: rgba(0,0,255,0.3);"> Kind of blue</p>

would show like the "Kind of blue" box to the right (your browser may not support this):

Kind of blue

Alternatively you can use the opacity property that does the same, e.g.

 
 background: rgb(255, 0, 0) ; opacity: 0.2;">

Finally, in CSS 3, you also may use HSL with an alpha channel

/* HSL model with alpha channel */
p { color: hsla(120, 100%, 50%, 1) }  /* green */
p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */