$.$ Launch a text editor and open the index.html file. Examine the source code and

locate the style element. Copy the CSS contained between the style tags and paste

into a new text document named bistro.css$.$ Save the bistro.css file in the print

folder.

$2.$ Edit the index.html file, delete the style tags and CSS$,$ and code a link tag in

the head section that associates the web page with the bistro.css file for screen

display $($use media$=$screen$).$

$3.$ Edit the index.html file and add another link tag that associates the web page with a

file named bistroprint.css for printing $($ use media$=$print$).$ Save the

index.html file.

$4.$ Launch a text editor and open bistro.css$.$ Since you want to keep most the styles for

printing, you will start by creating a new version of the external style sheet. Save

bistro.css with the name of bistroprint.css in the print folder. You will

modify three areas on this style sheet: the header selector, the main selector, and the

nav selector.

$$ Modify the header styles to print using black text in $20$ point font size:

header $\{$ color: #$000000$; font$-$size: $20$pt; $\}$

$$ Modify the main element area to print using a serif typeface in a $12$ point font

size:

main $\{$ font$-$family: $$Times New Roman$,$ serif; font$-$

size: $12$pt; $\}$

$$ Modify the nav area to not display:

nav $\{$ display: none; $\}$

$5.$ Save your file in the print folder. Test your work. Display your index.html file in a

browser. Select Print$>$Preview. Your display should look similar to the page shown

below. The header and content font size have been configured. The navigation does not

display.