Color and CSS

On the Web

Readings

castro5.gif Chapt 1, pp. 41-46, Appendix E or castro6.gif Chapt 7, 119-126, Appendix E.

An example

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).

Modify your 'research paper' page to add these new elements, particularly these style rules to your page.

<head>
<title>....</title>
<link rel="stylesheet" type="text/css"
href="http://www.goshen.edu/lo/centered500px.css">

<style type="text/css">
<!--
  body { background-color: #999999; color:#503333;}
  h1 {color: #6666FF; }
  #content { background-color: #bbbbbb; padding: 20px;}
-->
</style>
 </head>
<body>
<div id="content">
 ....
</div>
 </body>
</html>

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.

You don't need to know precisely how to convert from one base to the other, only that a number like #F9 is much greater than #1F and things like that.

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.