HTML and CSS Reference
In-Depth Information
1.
Open styles.css and add the following:
body {
background-color: gray;
}
2.
Save styles.css.
To see the affect of this rule, open index.html in your browser of choice. Whenever you save a modification made to
styles.css, index.html, or any other file, you should refresh the browser to see the most up-to-date version of the
page.
The rule you just added to styles.css tells the browser to select the
<body>
HTML element and apply the back-
ground color gray to it.
What if you want to add another style to the
<body>
element? Rather than add another
body
selector, you can
simply define a second declaration within this rule, as shown here:
1.
Inside the
body
selector, below the
background-color
declaration, add the following:
background-image: url(“../images/bg-body.jpg”);
2.
Save styles.css.
Note that in CSS, a word followed by parentheses is known as a
function.
A function requires at least one
argument
(depending on the function being used), which, in the case of the
url()
function, is the path to an image. In
Chapter 5 you will learn more about
background-image
and what exactly those two dots mean in the path.
You now see a background image applied to the body of the page, as shown in Figure 3-2. What happened to the
background color? Don't worry; it's still there! The browser sees that you've added both a background color and
background image to the same selector. The browser knows that a background image has more detail than a back-
ground color and is the preferred choice. So why add a background color if it's hidden behind an image? In some
cases, the browser may not download images (a user can turn them off, for example, or a technical issue may prevent
the image from being downloaded and displayed). If this happens, the page still has a background color similar to
that of the image. Also, an image may be too small to cover the whole background; the areas that it doesn't cover
show the background color.
