Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 84

Figure 3.6
The Web page
without any styles
Open the file in Notepad and view the source code. Notice that the XHTML code uses
the <h1> , <h2> , <p> , <ul> , and <li> elements. In this Hands-On Practice you'll code
embedded styles to configure selected background and text colors. You'll use the body
selector to configure the default background color ( #E6E6FA ) and default text color
( #191970 ) for the entire page. You'll also use the h1 and h2 selectors to configure dif-
ferent background and text colors for the heading areas.
Edit the embedded.html page in Notepad and add the following code below <title>
element in the head section of the Web page.
<style type="text/css">
body { background-color: #E6E6FA;
color: #191970;
}
h1 { background-color: #191970;
color: #E6E6FA;
}
h2 { background-color: #AEAED4;
color: #191970;
}
</style>
Save and test your file in a browser. Figure 3.7 (shown also in the color insert section)
displays the Web page along with color swatches. The monochromatic color scheme
was chosen using the Color Blender at http://meyerweb.com/eric/tools/color-blend.
Notice how the repetition of a limited number of colors adds interest and unifies the
design of the Web page.
View the source code for embedded.html and review the CSS and XHTML code. Note
that all the styles were located in a single place on the Web page. Since embedded styles
are coded in a specific location, they are easier to maintain over time than inline styles.
Also notice that you only needed to code the styles for the h2 selector once (in the head