HTML and CSS Reference
In-Depth Information
In the Lab
Lab 1: Creating an External Style Sheet for Printing
Instructions:
You have been asked to create a style sheet that can be used for printing across a number
of people's personal Web pages. You decide to set the printing styles in an external style sheet so that it
can easily be linked to any number of Web page files. You use the lab7-1.html file for this exercise. The
HTML code is completed for the Web page, as shown in Figure 7-20a. You should create the external
style sheet that results in Figure 7-20b.
(a)
Web page with
navigation bar
create external style
sheet so navigation
bar does not print
(b)
print preview with external
style sheet linked; does not
show navigation
Figure 7-20
Perform the following tasks:
1. Using Notepad++, create a new file for an external style sheet that is used for printing.
2. Using CSS, create the style structure so that the navigation bar on the Web page is not printed.
(
Hint:
Use the menubar id.) Also, align the content of the Web page on the left with a font size of
12 points in Times New Roman font for the printed page. (
Hint:
Use the content class.)
3. Save the file as lab7-1print.css.
4. Open the HTML file lab7-1.html and add a link to the external style sheet, lab7-1print.css.
5. Save the HTML file as lab7-1solution.html. Validate the file and then print it.
Continued >
