You have five tasks in this case study:1. Create a new folder for the Pacific Trails Resor...

You have five tasks in this case study:

1. Create a new folder for the Pacific Trails Resort website.

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

3. Update the Home page: index.html.

4. Update the Yurts page: yurts.html.

5. Update the pacific.css style sheet.

Task 1: Create a folder called ch4pacific to contain your Pacific Trails Resort website files. Copy the index.html and yurts.html files from the Chapter 2 Case Study pacific folder.

Task 2: The External Style Sheet. Launch a text editor. You will create an external style sheet named pacific.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 background color white (#FFFFFF) and text color dark gray (#666666)

• Style rules for the header element selector that configure background color (#000033) and text color (#FFFFFF)

• Styles for the nav element selector that configure sky blue background color (#90C7E3)

• Styles for the h2 element selector that configure medium blue text color (#3399CC)

• Styles for the dt element selector that configure dark blue text color (#000033)

• Styles for a class named that configure medium dark blue text color (#5C7FA3)

Save the file as pacific.css in the ch4pacific 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 pacific.css external style sheet. Add a element in the head section to associate the web page with the pacific.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 div in a future case study.

c. Find the company name ("Pacific Trails Resort") in the first paragraph below the h2. Configure a span that contains this text. Assign the span tag to the resort class.

d. Look for the company name ("Pacific Trails Resort") directly above the street address. Configure a span that contains this text. Assign the span tag to the resort class.

e. Assign the div that contains the address and phone information to an id named contact. 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 Yurts Page. Launch a text editor and open the yurts.html file. An example of the new version of the web page is shown in Figure.

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

b. Refer to Task 3 and configure the content div. Save and test your new yurts.html page. It should look similar to the one shown in Figure.

Task 5: Update the CSS. You may notice an empty space between the header area and the navigation area. The empty space is the default bottom margin of the h1 element. Refer back to Hands-On Practice 4.5 (Part 2), and recall that a technique to cause the browser to collapse this empty space is to configure the margin. To set the bottom margin of the h1 element to 0, code the following style for the h1 element selector in the pacific.css file: margin-bottom: 0;

Save the pacific.css file. Launch a browser and test your index.html and yurts.html pages. The gap between the h1 element and the navigation area should be gone. Your home page should now display similar to Figure. Click the navigation link to display the yurts.html page it should also render with the new styling from the pacific.css external style sheet.

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 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.

Hands-On Practice

In this Hands-On Practice you will experiment with div and span elements in the Trillium Media Design home page. Launch a text editor and open the starter.html file from the chapter4 folder in the student files. Save your page as span2.html and test it in a browser. Your page should look similar to the one shown in Figure.

Open span2.html in a text editor and view the source code. In this Hands-On Practice you'll code embedded styles to configure selected background and text colors. You'll also add tags to the web page. When you are finished with the first part of this Hands-On Practice, your web page will be similar to Figure.

Part 1

Configure the Embedded Styles. Edit span2.html in a text editor and add embedded styles in the head section above the closing tag. You will configure styles for a class named companyname and for the body, h1, h2, nav, and footer element selectors. The code is

Configure the Company Name. View Figure and notice that the company name, Trillium Media Design, is displayed in a different color than the other text within the first paragraph. You've already created a class named companyname in the CSS. You'll use a span to apply this formatting. Find the text “Trillium Medium Design” in the first paragraph. Configure a span element to contain this text. Assign the span to the class named companyname.

A sample code excerpt is 
Trillium Media Design will bring

Save your file and test in a browser. Your page should look similar to the one shown in Figure. The student files contain a sample solution at chapter4/span.html.

Part 2

As you review your web page and Figure, notice the empty space between the h1 element and the navigation area?the empty space is the default bottom margin of the h1 element. The margin is one of the components of the CSS box model with which you'll work in Chapter 6. One technique that will cause the browser to collapse this empty space is to configure the margin between the elements. Add the following style to the h1 element selector in the embedded CSS: margin-bottom: 0;

Save the file and launch in a browser. Your web page should now be similar to Figure. Notice how the display of the h1 and navigation area has changed. The student files contain a sample solution at chapter4/rework.html.

Figure The web page without any styles.

Figure This page uses the span element.

Figure The new header area.