CSS Visual Rules : Color and Background Color

 VISUAL RULES

Color and Background Color

Before discussing the specifics of color, it’s important to make two distinctions about color. Color can affect the following design aspects:

• Foreground color
• Background color

Foreground color is the color that an element appears in. For example, when a heading is styled to appear green, the foreground color of the heading has been styled. Conversely, when a heading is styled so that its background appears yellow, the background color of the heading has been styled.

In CSS, these two design aspects can be styled with the following two properties:

• color: this property styles an element’s foreground color
• background-color: this property styles an element’s background color

h1 {
  color: red;
  background-color: blue;
}

In the example above, the text of the heading will appear in red, and the background of the heading will appear blue.

Instructions:

1.Take a look at the caption on the image at the bottom of the page. In style.css, set the background color in the .caption selector to white.

Hint:

Use the background-color property to set the background color of an element!

2.Then, in the same ruleset, set the color of the text to black. That should make the text a bit easier to read!

Hint:

The color property will change the font color!