Lab 2: Color

Using the layout repository

If you followed along with the page on Color and CSS, your page is now using the 500-pixel centered layout from our layout repository.

Apply a color scheme

Use the Color Scheme Generator to find a pleasing set of colors for your page

If you need to, modify the 'local styles' section of your page to look like this:

<style type="text/css">
<!--
body {
  background-color: #999999; /* BG color outside the central column */
  color:#803333; /* Default color of text */
}
h1 {
  color: #6666FF; 
}
#content {
  background-color: #dddddd; /* BG color of the central column */
  padding: 20px;
}
-->
</style>

Apply your color scheme by modifying:

the default text color (the body{color:...}),
the body background,
the content box background color,
and one or more headline text colors.

On the color scheme generator, there's a link to create a "URL of this scheme". Click that, and copy the resulting URL. Display the URL for your color scheme at the bottom of your page. (Later, we can make it into a link...)

Hand it in!

Moodle link button "Hand in" the URL to your page (on the GC webserver) on Moodle. Type some text (e.g. "Jill's Color Lab") and make that into a link to your page by using Moodle's link button.

Make sure it's not a dreaded file:/// URL!