You have four tasks in this case study:1. Create a new folder for the JavaJam Coffee House...

You have four tasks in this case study:

1. Create a new folder for the JavaJam Coffee House website.

2. Create an external style sheet named javajam.css.

3. Update the Home page: index.html.

4. Update the Menu page: menu.html.

Task 1: Create a folder called ch4javajam to contain your JavaJam Coffee House website files. Copy the index.html and menu.html files from the Chapter 2 Case Study javajam folder.

Task 2: The External Style Sheet. Launch a text editor. You will create an external style sheet named javajam.css. A sample wireframe is shown in Figure.

Code CSS to configure the following:

• Global styles for the document (use the body element selector) with a beige background color (#F5F5DC) and dark brown text color (#2E0000).

• Styles for the header element selector that configure a tan background color (#D2B48C).

• Styles for the footer element selector that configure background color (#D2B48C) and text color (#000000).

Save the file as javajam.css in the ch4javajam folder. Check your syntax with the CSS validator at http://jigsaw.w3.org/css-validator. Correct and retest if necessary.

Task 3: The Home Page. Launch a text editor and open the home page, index.html.

a. Associate the javajam.css external style sheet. Add a element in the head section to associate the web page with the javajam.css external style sheet file.

b. Assign the div that contains the main page content to an id named content. Change the first

tag to

. We'll configure CSS for this id in a future case study.

Save and test your index.html page in a browser. It should be similar to the page shown in Figure, and you'll notice that the styles you configured in the external CSS file are applied!

Task 4: The Menu Page. Launch a text editor, and open the menu. html file. An example of the new version of the web page is shown in Figure.

a. Code a element in the head section to associate the web page with the javajam.css external style sheet file.

b. Refer to Task 3 and configure the content div.

Save and test your new menu.html page. It should look similar to Figure.

This case study demonstrated the power of CSS. Just a few lines of code have transformed the display of the web pages in the browser.

Figure New Pacific Trails Resort home page with color swatches.

Figure The wireframe for the Pacific Trails Resort home page.

Figure First version of the new index.html page.

Figure First version of the new yurts.html page.

Figure New JavaJam Coffee House home page with color swatches.

Figure The wireframe for the JavaJam Coffee House home page.

Figure The new index.html page.

Figure The new menu.html page.