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
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.
Search WWH ::

Custom Search