Jan's Working with the Web

Step-by-Step: Page Colors

 Start with:   , hector16-Lastname-Firstname.htm, resource files

Internal Style Sheet: Set Colors for Page with Color Numbers

You will create an internal style sheet to set the background color for the page, the text color, and the colors for links.

1. If necessary, open hector16-Lastname-Firstname.htm in your editor.

2. Save As hector17-Lastname-Firstname.htm to the web project2 folder of your Class disk.
   
3. Edit the HEAD section to include the following styling code, but you may omit the comments if you wish:
   
   <style type="text/css">
   body {
        background-color:#00ffff;   /*blue-green*/
        color:#000000;              /*black*/
   }
   a:link {
        color:#0000cc;             /*dark blue*/
   }
   a:visited {
        color:#00cc00;             /*green*/
   }
   a:hover{
        background-color:#aa00ff;  /*purple*/
        color:#ff0000;            /*red*/
   }
   a:active{
       color:#ffffff;            /*white*/
   }
   </style>
   

   Copy and Paste: Don't try to copy and paste the code above. You may get unexpected results due to hidden characters! 

4. Save.
   [hector17-Lastname-Firstname.htm]

5. Switch to your browser and view the new page.
   • The signature image at the top right clearly has a white background.
   • Links that you have visited, and are still in your browser history, will be in green.
   • Unvisited links will be in dark blue.

   Typing is important!

   Problem: Style code shows in the browser
   There was a coding error in the STYLE section of the page. In the example, the tag <style> was misspelled as <sstyle>

   Problem: Page is blank
   You left our a quote or closing bracket in part of the HEAD.

   Problem: Part or all of the styles are not used
   This is usually a typing problem or a failure to create or apply correctly.
   Solutions:
   

   • Check punctuation of styles - colons, semicolons, quotes, parentheses, and brackets.
   • Check spelling of the name of attributes and values, especially font and color.
   • Check spelling and punctuation of class in the tag where you wanted to apply it.
   • Did you actually create the style named in the tag?
   • Did you apply the correct class to the tag?
     
6. Experiment: Page Colors
   • Switch back to your editor and change the colors in the STYLE section.
   • Use various combinations of 00, 33, 66, 99, cc, and ff.
   • Save and view your changes in the browser.
   • Which combinations are easy to read and which are impossible to read.
   • Scroll the page to see how the images look on various background colors.

     If you did not try out the Color Picker during the previous lesson, try it now and pick out some combinations to try on your page.

Internal Style Sheet: Set Colors for Page with Color Names

You can use names for many colors. Then you may not need comments to tell you what the color is.

1. Return to your editor and edit the STYLE section to use the following color names:
   • body background-color: wheat
   • body color: navy
   • a:link color: green
   • a:visited color:navy
   • a:hover background-color:pink
   • a:active color: lime

   Tips for Styles: Do not use # with a color name, only with a color number. You still need a semicolon after a declaration with a color name, like color:green;

2. Delete the comments from the internal style sheet.

3. Save.
   [hector17-Lastname-Firstname.htm]

4. Switch to your browser and Refresh.

   The signature image is still not transparent, of course. The look for the whole page is quite different with different colors.

Paint: Pick a Custom Color

The easy way to use colors in HTML is to pick a color from the chart of named colors! But, if none of those is quite right or you cannot get to a chart, you need the color number for exactly what you want. You don't want to spend a lot of time guessing what numbers to use to get that perfect shade of green!

An advanced HTML editor like Dreamweaver or an advanced graphics program like PaintShopPro or one of the Adobe graphics programs will have a tool for picking colors that shows you the #rrggbb number and probably also the RGB number.

We will work with Paint, which does not show the HTML version of a color's number, but does easily show the RGB version.

1. Open Paint and then:
   WinXP/Vista: Menu Color > Edit colors
   Win7, Win8, Win8.1, Win10:
   Click on the ribbon button Edit Colors .
   

   The Edit Colors dialog opens.

2. If necessary, in the Color dialog click on the button Define Custom Colors >> to expand the window to the right.

   Parts of the Color Dialog:

   • On the left, a palette of 48 standard Windows colors.
   • On the right, a rainbow box for picking any of millions of colors and a column to adjust the exact shade of that color.
   • Crosshairs shape = current color is in the rainbow box. Arrow = shade of the color.
   • Color|Solid box = the currently selected color
   • Hue, Saturation, Luminance or Lightness (HSL) numbers from one model of identifying colors.
   • Red, Green, Blue (RGB) numbers from another model for colors.
   • Does not show the HTML color numbers, which are hexadecimal numbers (base 16).
   • Custom colors. Click a blank square on the left (BEFORE you select your color in the rainbow box). The color picker resets. Select a color, and then click Add to Custom Colors. Click on OK and your new color appears in the Color Palette. You can use the new color on other images while Paint is open. Once you close Paint, all custom colors are forgotten.
3. Experiment: Colors Dialog
   • Drag the crosshairs in the large rainbow box to select a color and observe how the RGB numbers change in the dialog.
   • Use the keyboard arrow keys to move the crosshairs in the rainbow box.
   • Slide the pointer up and down in the color column on the right to select a shade of the current color.
     How to the numbers change?
   • Edit the numbers yourself for Hue, Saturation, and Luminance and observe what colors you get.
     
     • The largest number you can enter is 255 and the smallest is 0.
     • Larger numbers for Hue move the crosshairs which way?
     • Larger numbers for Saturation move the crosshairs which way?

     • Larger numbers for Luminance move the pointer on the color column which way. How do the crosshairs move?

   • Edit the numbers for Red, Green, Blue and observe what colors you get.
     The largest number you can enter is 255 and the smallest is 0.
     There is no direct pattern for how the crosshairs move within the rainbow box.

     Dithered Colors: If you have your computer set to only 256 colors (Why??), some of the colors will look spotty. Windows dithers the colors by using dots of the colors it knows to create colors it cannot display directly. Rare these days! My monitor won't let me set the number of colors low enough to show this effect. I had to find an old screenshot. The light aqua is dithered with gray, if you look really carefully. Lots of obvious dithering in the rainbow box.

     You often see the same effect when you save a screen shot as a GIF file because that format only allows 256 colors. They are not the SAME 256 colors in every image but photos, for example, need a lot more than 256!
     

     Graphics Programs: A more advanced graphics program will likely include the HTML color number also.

4. To create your final custom color (so that your document will match mine!) type in the boxes for Red, Green, and Blue the numbers 203, 230, and 255, in order. The Color|Solid box shows you a light blue.
5. Close Paint.
   Now you can write a STYLE to use this color.

Internal Style Sheet: Use Custom RGB Color

1. Edit your HTML code in the STYLE section, up in the HEAD section, to replace the named color for the BODY background-color with your RGB color values:
     background-color:rgb(203,230,255);

2. Save.
   [hector17-Lastname-Firstname.htm]

3. Switch to your browser and Refresh to view the saved page.