Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

This is the 8th section of the CSS Getting Started tutorial; it explains how you can specify color in CSS. In your sample stylesheet, you introduce background colors.

Information: Color

In this tutorial so far, you have used a limited number of named colors. CSS2 supports 17 named colors in all. Some of the names might not be what you expect:

  black   gray   silver   white  
primaries red   lime   blue  
secondaries yellow   aqua   fuchsia  
  maroon   orange   olive   purple   green   navy   teal  

 

Details

Your browser might support many more named colors, like:

dodgerblue   peachpuff   tan   firebrick   aquamarine  

For details of this extended list, see: SVG color keywords in the CSS 3 Color Module. Beware of using color names that your reader's browsers might not support.

For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three hexadecimal digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:

black   #000
pure red   #f00
pure green   #0f0
pure blue   #00f
white   #fff


For the full palette, specify two hexadecimal digits for each component:

black   #000000
pure red   #ff0000
pure green   #00ff00
pure blue   #0000ff
white   #ffffff

You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.

Example

With a little practice, you can adjust the three-digit colors manually for most purposes:

Start with pure red:   #f00
To make it paler, add some green and blue:   #f77
To make it more orange, add a little extra green:   #fa7
To darken it, reduce all its components:   #c74
To reduce its saturation, make its components more equal:   #c98
If you make them exactly equal, you get gray:   #ccc

For a pastel shade like pale blue:

Start with pure white:   #fff
Reduce the other components a little:   #eef
More details

You can also specify a color using decimal RGB values in the range 0 – 255, or percentages.

For example, this is maroon (dark red):

rgb(128, 0, 0)

For full details of how to specify colors, see: Colors in the CSS Specification.

For information on matching system colors like Menu and ThreeDFace, see: CSS2 System Colors in the CSS Specification.

Color properties

You have already used the color property on text.

You can also use the background-color property to change elements' backgrounds.

Backgrounds can be set to transparent to explicitly remove any color, revealing the parent element's background.

Example

The Example boxes in this tutorial use this pale yellow background:

background-color: #fffff4;

The More details boxes use this pale gray:

background-color: #f4f4f4;

 

Action: Using color codes

Color page

  1. Edit your CSS file.
  2. Make the change shown down here, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)
  3. HTML Content

    <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p>
    <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>
    

    CSS Content

    /*** CSS Tutorial: Color page ***/
    
    /* page font */
    body {
      font: 16px "Comic Sans MS", cursive;
    }
    
    /* paragraphs */
    p {
      color: blue;
    }
    #first {
      font-style: italic;
    }
    
    /* initial letters */
    strong {
      background-color: #ddf; 
      color: red;
      font: 200% serif;
    }
    
    .spinach {
      color: green;
      background-color: #ddf;
    }
    
    
  4. Save the file and refresh your browser to see the result.
  5. The result should be like this:

Challenge

In your CSS file, change all the color names to 3-digit color codes without affecting the result.

(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)

Possible solution

The following values are reasonable approximations of the named colors:

strong {
  color: #f00; /* red */
  background-color: #ddf; /* pale blue */
  font: 200% serif;
}

.carrot {
  color: #fa0; /* orange */
}

.spinach {
  color: #080; /* dark green */
}

p {
  color: #00f; /* blue */
}

 

Hide solution
See a solution for the challenge.

What next?

Your sample document and your sample stylesheet strictly separate content from style. The next section explains how you can make exceptions to this strict separation.

Document Tags and Contributors

 Last updated by: MajinBui,