Background Colors

We have the top section PAGE HEADER that contains the website heading and the navbar. Just before the green comment for that section, we have an opening DIV tag to start the section.

1. Start by hitting the Space Bar after "DIV"

2. Then type out class="" 
3. Then inside quotation marks, at the name of our style pgHdr

4. Copy class="pgHdr" from the home page to the same DIV on the other topic pages.

1. On your home page, add class="pgContent" in the opening DIV that's just before the green comment for "PAGE CONTENT goes after this". 
2. Then copy that to that same DIV on your other content pages

Now go to your myStyles.css file.

• After the body style is closed, on a new line type out .pgHdr {
• it will automatically give the closing bracket }

• Then [Enter] 2x and TAB in

• Type out the property background-color:
• add a space after and a semicolon ;

• Click on the following link: HTML COLOR CODES
• Find a color you like and copy the code #/code.
• If you want to get color codes from your background image, use this link.

• Paste the color code you copied that you liked in your pgHdr style, just before the semicolon

Save your CSS file and take a look at your page. If you like the color, continue; otherwise try different colors until you find one you like for your page heading. 

Don't worry about the text color, if it's hard to read; we'll change that in a bit.

Now do the same for the other DIV. 

• Type out .pgContent {
• [Enter] 2x so ending brack } on separate line
• On the empty line, type out background-color: ;
• Find a color; copy the color # and paste it after the property.

On the home page, it will look nicer to have everything including the pictures inside one box, so select the green comments with the closing and opening DIV for the PAGE CONTENT... and delete. There should only be one DIV starting before the page header and closing at the bottom.

So now you'll see the pictures inside the same box as the page heading.

Go into body style and add a new line (indented) and add...

• color: white; if your background is darker
• color: black; if you're background is a lighter color

This sets the color for the content/text on your topic pages (H2, lists, paragraphs).