(^112) Chapter 3 Configuring Color and Text with CSS
Hands-On Practice Case
Create a folder called javajamcss. Copy all the files from your javajam folder into the
javajamcss folder.
- The External Style Sheet.Launch Notepad. You will create an external style sheet
named javajam.css. Code the CSS to configure the following:
● Global styles for the document background color (#ffffcc), text color
(#330000), and Verdana, Arial, or any sans-serif font
● Style rules for the h1selector that configure background color (#ccaa66), text
color (#000000), 200% line height, and centered text
● Style rules for the centered navigation area (use an id named nav)
● Style rules for the page footer area (use an id named footer) for background
color (#ccaa66), text color (#000000), small font size (.60em), italics, and
centered
Save the file as javajam.css in the javajamcss folder. Check your syntax with the
CSS validator (http://jigsaw.w3.org/css-validator). Correct and retest if necessary. - The Home Page.Launch Notepad and open the index.html file. You will modify
this file to apply styles from the javajam.css external style sheet as follows:
● Add a element to associate the Web page with the javajam.css exter-
nal style sheet file. Save and test your index.html page in a browser and you’ll
notice that the styles configured with the body and h1selectors are already
applied!
● Configure the navigation area. Since the navigation is not semantically a
“paragraph” (a collection of sentences about a central topic), replace the
element with aelement. Assign thisto the id named nav.
● Configure the content area with a div assigned to an id named “content”.
Code the opening div tag on a new line after the navigation div. Code the clos-
ing div tag after the end of the paragraph that contains the address and phone
number. This content id will be styled with CSS in later chapters.
Figure 3.22
New JavaJam
index.html
Go to the end of the
book for a full color
version of this figure