Journal Background Color

I will be looking to see that you completed these steps when you turn in your journal this week.

In the last activity you added a background color to a page with an inline style. In this activity you will harness the power of an external style sheet so that you can specify all of your styles in one place, and then simply link them to all of the pages you want to have those styles.

  1. Use the visibone colorlab to choose a background color code in the form of #XXXXXX.
  2. Also choose a color for the text in the form of #YYYYYY.
  3. Open notepad. Save the blank file as "style.css" in your journal folder.
  4. The code below is what you need to put in this file. The word "body" in the first line indicates that we are choosing to apply these styles to everything inside the <body> tag. Then each attribute-value pair uses the same colon-semicolon notation as the inline style.
    5. body {
        background-color: #XXXXXX;
        color: #YYYYYY;
    }
  5. Also notice that the properties and values were divided by colons (:) and the property-value pairs each ended with a semicolon (;).
  6. Save!
  7. Open BOTH pages of your journal Web site.
  8. In the <head> section of both pages, type the line: <link href="style.css" type="text/css" rel="stylesheet" />
  9. That line of code indicates we are linking in an external source of information. The type of this source is "text/css" and its relationship to this page is that it's the "stylesheet".
  10. Save all files. View the journal in a Web browser.
  11. Check for problems and adjust the colors as necessary to produce a readable look.
  12. Save!