a CSs le named color, and background color selections for the document, hl elerment selector, p eie ment selector, and footer class, using the colors you have chosen colorl.css that configures font propertios, text d. Create a web page named color1 html that shows examples of the CSS style rules color1.htm WEBSITE CASE STUDY Implementing CSS Each of the case studies in this section continues throughout most of the text. This chapter implements CSS in the websites. JavaJam Coffee House See Chapter 2 for an introduction to the JavaJam Coffee House Case Study. Figure 231 shows a site map for the JavaJam website. The Home page and Menu page were cre- ated in Chapter 2. You will develop a new version of the website that uses an external style sheet to configure text and color. Figure 2.32 depicts the wireframe page layout. You have the following tasks: 1. Create a new folder for this JavaJam case study. 2. Create an external style sheet named javajam.css that configures the color and text for the JavaJam website. 3. Modify the Home page to utilize an external style sheet to configure colors and fonts. The new Home page and color swatches are shown in Figure 3.29. Figure 3.29 New JavaJam index.html #221811 JavaJam Coffee House Home Menu Music lobs #FCEBB6 Relax at JavaJam Specialty Coffee and Tea .Bagels, Muffins, and Gluten-free Pastries Organic Salads Open Mic Night 12010 Garrett Bay Road #D2848C Music and Poetry Readings Eilison Bay, WI 54210 888-555-5555 Chapter 3 Configuring Color and Text with Css 4. Modify the Menu page to be consistent with the new Home page. 5. Configure centered page layout. Hands-On Practice Case Task 1: The Website Folder. Create a folder on your hard drive or portable storage device javajamcss. Copy all the files from your Chapter 2 javajam folder into the javajamcss fold Task 2: The External Style Sheet. You will use a text editor to create an external style sheet 3. Launch a a div ele within th notice t in Figu er named javajam.css. Code the CSS to configure the following: 1. Global styles for the document (use the body element selector) with background color Experiment font family single file #FCEBB6; text color #221811 ; and Verdana, Arial, or any sans-serif font. 2. Styles for the header element selector that configure background color # D2B48C centered text. 3. Styles for the h1 element selector that configure 200% line height. 4. Styles for the nav element selector that configure centered, bold text. Hint: Use the CSS text-align and font-weight properties. 5. Styles for the footer element selector that configure background color #D2B4BC, small font size (.60em), italics, and centered text Save the file as javajam.css in the javajamcss folder. Check your syntax with the CSS vall dator (htp:/jigsaw.w3.org/css-validator). Correct and retest if necessary. Task 3: The Home Page. Launch a text editor, and open the index.html file. You will m this file to apply styles from the javajam.css external style sheet as follows: 1. Add a element to associate the web page with the javajam.css external style 2. Configure the navigation area. Remove the elements which are no longer needed 3. Configure the page footer area. Remove the and elements-they are Save the index.html file, and test it in a browser. Your page should look similar to the ore sheet file because you have configured bold text with CSS. no longer needed since CSS is now used to configure the text. shown in Figure 3.29 except that your page content will be left-aligned instead of centere Don't worry-you'll center your page layout in Task 5 of this case study. Task 4: The Menu Page. Launch a text editor, and open the menu.html file. You will mods this file in a similar manner as you modified the home page: Add the element and configure the navigation and page footer areas. Save and test your new menu.html page should look similar to the one shown in Figure 3.30, except for the alignment. Task 5: Center Page Layout with CSS. Modify javajam.css, index.html, and menu.html to configure page content that is centered with 80% width (refer to Hands-On Practice 331 necessary) 1. Launch a text editor, and open the javajam.css file. Add a style rule for an id named wrapper with width set to 80%, margin-right set to auto, and margin-left set to auto. Launch a text editor, and open the index.html file. Add the HTML code to configure a div element assigned to the id wrapper that "wraps," or contains, the code within the body section. Save and test your index.html page in a browser and you'll notice that the page content is now centered within the browser viewport as shown in Figure 3.29. 2