HTML and CSS Reference
Case Problem 4
CSS to design
the layout for the
front page of a
Data Files needed for this Case Problem: address.txt, blake.jpg, cougar.jpg, links1.txt,
links2.txt, modernizr-1.5.js, papertxt.css, parch.jpg, parch2.jpg, parktxt.htm,
The Park City Gazette Park City, Colorado, is a rural mountain community noted for its
ski slopes and fi shing holes. Kevin Webber is the editor of the weekly Park City Gazette .
The paper recently redesigned its printed layout, and Kevin wants you to do the same
thing for the online version. He's prepared several fi les containing sample text from
recent articles and a few lists of links that usually appear in the front page of the news-
paper's Web site. He's also provided you with image fi les that can be used for the paper's
logo and background. Your job will be to use all of these pieces to create a sample Web
page for him to evaluate.
Complete the following:
1. Use your text editor to open the parktxt.htm and papertxt.css fi les from the
tutorial.04\case4 folder. Add your name and the date in the comment section of
each fi le. Save the fi les as park.htm and paper.css , respectively.
2. Using the content of the address, links, and story text fi les, create the content and
structure of the park.htm fi le. You are free to supplement the material in these text
fi les with additional content of your own if appropriate. Use the # symbol for the
value of the href attribute in your hypertext links because you will be linking to
pages that don't actually exist.
3. Link the park.htm fi le to the paper.css style sheet fi le and then save your changes.
4. Go to the paper.css style sheet fi le and create a layout for your Park City Gazette
sample page. The layout should be based on a fl uid design that will render well on
page widths from 1000 up to 1400 pixels.
5. The specifi cs of the page design are up to your imagination and skill, but must
include the following features:
• use of the display property
• application of width and height style properties
• fl oated elements and cleared elements
• defi ned margin and padding spaces as well as maximum and minimum widths
• border styles
• rounded or elongated corners
• use of progressive enhancement along with one or more browser style extensions
• a tiled or non-tiled background image
• an example of relative or absolute positioning
6. Test your layout and design on a variety of devices, browsers, and screen resolutions
to ensure that your sample page is readable under different conditions.
7. Submit your completed fi les to your instructor, in either printed or electronic form,