HTML and CSS Reference
20. Set the media of the swlayout.css and sweffects.css style sheet files to the screen
device. Set the media of the swprint.css style sheet file to the print device.
21. Save your changes to the file, and then open it in your Web browser. Print the page
or preview the printed version in your browser. Verify that: a) the article describ-
ing Messier objects appears on the first page; b) each subsequent page contains the
image and description of a single Messier object; c) the SkyWeb logo appears at the
top of each page as a page header; and d) the url of each of the two hypertext links
appears in parentheses after the link text.
22. Submit your completed files to your instructor.
Case Problem 4
CSS3, print, and
mobile styles by
home listings for
an online realty
Data files needed for this case Problem: brlogo.png, img01.jpg - img09.jpg, listing.txt,
Browyer Realty Linda Browyer is the owner of Browyer Realty, a real estate company
operating in Owatonna, Minnesota. She's asked you to help create a style design for the
pages on her site that describe residential listings. Linda has already written up sample
content for a listing and collected images of the property. She needs you to create the
HTML file and write up the style sheets.
Complete the following:
1. Use your text editor to create an HTML file named browyer.htm that will contain the
document describing the property. Also, create a style sheet file named brbase.css
that will contain basic styles that will be used by all devices, breffects.css that will
contain special visual effects, brlayout.css that will contain the page layout design
for desktop screen devices, brprint.css for print styles, and brmobile.css for mobile
devices. Add the appropriate comments and documentation to each file.
2. Create the content of the browyer.htm file using the contents of the listing.txt text
file as a guide.
3. Design the page layout of your document in the brlayout.css file
4. Add CSS3 visual effects to your document using the breffects.css style sheet. The
effects are left to you to choose, but they should include examples of the following:
• a linear or radial gradient, written using the CSS3 linear-gradient() or
• a text shadow using the CSS3 text-shadow property
• drop shadows using the CSS3 box-shadow property and either the IE
DropShadow or Shadow filter
• a rotated object using the CSS3 rotate property
• semi-transparent objects using the opacity style and the IE Alpha filter
5. Linda wants users to be able to view a nice printout of her sample listing. Place the
print styles in the brprint.css file. Include an example of the @page rule and several
examples of styles that either place or suppress page breaks.
6. Linda also wants potential clients to be able to view the sample listings in a
format appropriate for mobile devices. Create the styles for mobile devices in the
brmobile.css file. Your style sheet should include different rules depending on
whether a device is in portrait or landscape orientation.
7. Link your Web document to your style sheets. Include the appropriate media queries
to match each style sheet with the correct device and device width. Include a meta
element to set the width of the viewport.