Question

Configure Printing for Hands-On Practice 7.4. Configure special printing for the Lighthouse Island Bistro index.html file created in Hands-On Practice 7.4. This file is in the chapter7/sprites folder in the student files. Modify the web page so that it is associated with an external style sheet called lighthouse.css instead of using embedded styles. Save and test your page. Create a new style sheet called myprint.css, which will prevent the navigation from displaying when the page is printed. Modify the index.html page to be associated with this file. Review the use of the media attribute on the link element. Save all files and test your page. Select File > Print > Preview to test the print styles. HTML and CSS code.

Answer 1

To configure printing for the Lighthouse Island Bistro index.html file, you need to create an external style sheet called lighthouse.css and associate it with the file. Then, create a new style sheet called myprint.css to prevent navigation from displaying when the page is printed. Finally, modify the index.html page to associate it with the myprint.css file and save all the files before testing the page.

Step-by-step explanation:

Configure Printing for Hands-On Practice 7.4

Create an external style sheet called lighthouse.css and associate it with the index.html file.

Create another style sheet called myprint.css to prevent navigation from displaying when the page is printed.

Modify the index.html file to associate it with the myprint.css file for print styles.

Save all files and test the page by selecting File > Print > Preview.

Example:

In the head section of your index.html file, add the following line to associate it with the external style sheet:

<link rel="stylesheet" href="lighthouse.css">

In the same head section, add the following line to associate it with the print style sheet:

<link rel="stylesheet" href="myprint.css" media="print">

In your myprint.css file, add the following CSS code to hide the navigation:

nav { display: none; }