Manuscript for HTML Tutorial #14

Listed below is the manuscript of all textual instructions used in HTML Tutorial #14 - Changing the Color of Your Web Page Background. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #14 - Changing the Color of Your Web Page Background

Lesson #14: Background Color. Click the play button to begin the tutorial.
The default colors for a web page are usually black text on a white background.
However, those colors can be changed right here in our style sheet.
We already have a rule for text color, now let’s add one for background-color.
We could create a whole new rule, but since this existing rule already uses the body selector, we can just add to it.
When adding new declarations to a rule, they should be separated by a semicolon.
Now we can type in our background-color declaration.
As you can see, we’ve used the RGB functional notation that we learned about in our last lesson.
Let’s see how our page looks.
As you can see, rgb(51,51,102) gave us this dark purple background.
Although it’s a bit difficult to read green text against this background.
Let’s change our text color to white so it will be easier to see.
Notice that this time we used the hexadecimal notation to represent our color.
We could also use the functional notation of rgb(255,255,255), or just the word white since it’s one of the basic 16 colors.
As you can see, white text works well with dark backgrounds, while black text works well with...
...light backgrounds.
Use discretion when changing background and text color, as certain combinations can be hard on the eyes, or difficult to see if a visitor is colorblind.
Let’s go back to black on white for the main area of our page. Later on, once we create it, we’ll add some background color to our navigation section. Go ahead and change your page colors if you like, and then begin Lesson#15.

<<<Tutorial #13

Tutorial #15>>>