Color and CSS

We'll almost always use CSS (Cascading Style Sheet) rules to set colors, though there are older ways of setting colors (as tag attributes, or using the <font> tag).

See if this doesn't result in a page with a non-default background color, and level 1 headlines that are blue.

Notice that just one rule for the h1 tag will affects all the level one headlines in your document.

Anatomy of a CSS "style rule"

This whole thing is referred to as a style rule:

        body {
           background-color: #999999; 
           color:#503333;  /* This is the typeface color */
        }

It has the following "pieces":

• body is the selector which determines what (here, what tag) the rule applies to.
• color: #503333 is a declaration.
• color is a property name.
• #6666FF is the value of the property.
• Declarations--if you have more than one--are separated by semicolons from each other, inside the curly brackets.
• Comment syntax /* ... */ is different from html comment syntax.

Hexadecimal notation ?! or base 16

In base 10 you count like:

1,2,3,4,5,6,7,8,9,10,11,12,....

In base 16 you count like (base 16 numbers will have a "#" in front of them...):

#1,#2,#3,#4, ... #9,#A,#B,#C,#D,#E,#F,#10

where #10=16. #FF=255.

Hexadecimal color notation

Here's how we'll use this to specify colors:

• The amount of red in a color is specified on a scale from:
  • 0 = #00 = "no red" to
  • 255 = #ff = "as much red as possible"
  and similarly for green and blue.
• We can write a color as one, six-digit hex number where the digits are in "RGB" order, like this:
  
  #RRGGBB

Examples

	#000000	No red, green, or blue
	#770000	dull red (no green or blue)
	#BB0000
	#FF0000	as much red as possible (fully "saturated")

	#007700	dull green
	#000077	dull blue
	#999999	equal amounts of all three = gray
	#d0d0d0	lighter gray
	#ffffff	As much R, G, B as possible = white
	#990099	red+blue = purple

Alternate color notation

• Recently, you can also shorten double hex digits like this: #440077 = #407.
• You can use a recognized keyword, like "red", or even "chartreuse" (Firefox)

It's also possible to specify colors like this: color: rgb(90%,50%,50%)

Choosing colors

The easiest way to pick color values is to use a "color picker":

• The color picker built in to Photoshop.
• WellStyled.com's Color Scheme Generator let's you quickly explore palettes based on recognized color relationships.
• The Color Blender will also generate a palette based on one color that you select.