Lesson 8: Living Color

Before we get started on this lesson, we'll need to download another nifty little piece fo software called Hex Color Finder 3. This is a cool little application that lets you sample colors on your screen and see what the hex codes are. Go ahead and install it and then we'll get started.

Let's Get Started!

Hex Codes

You probably already know that computer moniters, cell phones and TVs use the Red-Green-Blue or RGB color spectrum to create color. Each one of these colors has a range from 0-255, with 0 being the absence of color and 255 being 100% saturation. If all three values are 0, the color is black. If all three values are 255, it's white.

Browsers use something called a "hex code" to create colors on your screen. A hex code is a six-character string, identified by a hash sign before it. For example, #ffffff. The string is actually made up of three pairs of characters, representing R, G, and B. The first two characters are the R value, the second two represent G, and the last two represent blue. Check this out:

You'll have to use your cursor to highlight the last line in the list. It's in white!

If you were looking carefully at the patterns in the examples I just gave, you will have noticed that the "FF" keeps changing places. In hex code speak, "FF" means "full on" or a value of 255. If you see "00," that means "off" or a value of zero.

But obviously, the internet has way more colors than red, green, blue, black and white -- and that's where other characters in the hex code come into play. The hex color finder software you downloaded at the beginning of this lesson is a great way to play around with that. Fire it up and play around with the sliders to see how the hex codes change when displaying different color options. I'm going to choose #974BC3 for my examples.

Paint The Town!

Now that you understand how colors are identified in HTML, let's change the colors on some things, shall we? You already learned how to change fonts using the style attribute and that's the same one we'll be using to change colors in this first example. Let's try a paragraph first.

  
	<p style= "font-family:'Roboto', sans-serif; color: #974BC3;">This is the song that never ends. And it 
	goes on and on my friends. Some people started singing it not knowing what it was -- and they'll 
	just keep on singing it forever just because...!</p>

Here's what it looks like on the browser side:

This is the song that never ends. And it goes on and on my friends. Some people started singing it not knowing what it was -- and they'll just keep on singing it forever just because...!

You can actually string a LOT of information into the style attribute... fonts, colors margins... But in order to do it properly, you need to make sure that each of the items you add are separated by a semicolon (;). Take a closer look:

  
	<p style= "font-family:'Roboto', sans-serif; color: #974BC3;">words</p>

In the example above, we have the font-family ('Roboto', sans-serif) and the color (#974BC3) separated by a semicolon. Notice too that the variables we are changing (font-family and color) are separated by a colon (:).

Colorful Blocks

Remember our lesson on tables? Let's grab some of the code we used there and add some color. In the example below, I've changed the background color on the table head to purple and the font to white:

  
	<table border="1px" cellpadding="3px" cellspacing="10px">
	<caption>Table 1: A Sample Selection</caption>
	  <thead style="background-color:#974BC3; color:#fff;">
	    <tr>
	      <th>Column 1 Heading</td>
	      <th>Column 2 Heading</td>
	    </tr>
	  </thead>
	
	  <tbody>
	    <tr>
	      <td>Column 1, Row 1</td>
	      <td>Column 2, Row 1</td>
	    </tr>
	  <tbody>
	
	  <tfoot>
	    <tr>
	      <td>Column 1 Footer</td>
	      <td>Column 2 Footer</td>
	    </tr>
	  <tfoot>
	</table>

And here's what it looks like rendered out:

Table 1: A Sample Selection
Column 1 Heading Column 2 Heading
Column 1, Row 1 Column 2, Row 1
Column 1, Row 2 Column 2, Row 2

If you were paying close attention, you may have noticed a little shorthand that I used on the white. Instead of listing out all six characters (#ffffff), I only used three (#fff). When the tag pairs are all the same like that (#fff and #000), you only need to specify the first character in the pair. You can also use words to identify the most comon colors (like "red")

Let's add a little more color to the table. I'm going to make all the cells a lighter shade of purple.

  
	<table border="1px" cellpadding="3px" cellspacing="10px" style="background-color: #BF73EB;">
	<caption>Table 1: A Sample Selection</caption>
	  <thead style="background-color:#974BC3; color:#fff;">
	    <tr>
	      <th>Column 1 Heading</td>
	      <th>Column 2 Heading</td>
	    </tr>
	  </thead>
	
	  <tbody>
	    <tr>
	      <td>Column 1, Row 1</td>
	      <td>Column 2, Row 1</td>
	    </tr>
	  <tbody>
	
	  <tfoot>
	    <tr>
	      <td>Column 1 Footer</td>
	      <td>Column 2 Footer</td>
	    </tr>
	  <tfoot>
	</table>

And here's what it looks like rendered out:

Table 1: A Sample Selection
Column 1 Heading Column 2 Heading
Column 1, Row 1 Column 2, Row 1
Column 1, Row 2 Column 2, Row 2

Lesson 8: Prove it

Ready to crank out some code? Let's do it!

When you are done, save the file as MyLesson8.html and upload it to the folder with your name. You can check your work here. Look at my table above for a sample of how this assignment should turn out.

Back to the lesson plan.