In this chapter’s case study you will use the existing Pacific Trails ( Chapter 2 ) website as a starting point while you create a new version of the website that uses an external style sheet to configure color (see Figure 4.25 ).
Figure 4.25 New Pacific Trails Resort home page with color swatches.
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 4.26 .
Figure 4.26 The wireframe for the Pacific Trails Resort home page.
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 resort 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 <link> element in the head section to associate the web page with the pacific.css external style sheet file.
b. 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.
c. 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.
d. 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 4.27 , and you’ll notice that the styles you configured in the external CSS file are applied!
Figure 4.27 First version of the new index.html page.
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 4.28
Figure 4.28 First version of the new yurts.html page.
a. Add a <link> element in the head section to associate the web page with the pacific.css external style sheet file.
Save and test your new yurts.html page. It should look similar to the one shown in Figure 4.28 .
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 4.25 . 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.