Thursday, March 16, 2017

Print a web page with CSS styles

Assume you have created a web page with several CSS styles including several colours in it. However, when you try to print that web page through a web browser you might not see the included styles in the web pages's print preview.

To make available your styles to the page's print version, you have to import your print style sheet to your web page as follows.

print_style.css


.title{
color:blue
}


print_page.html


<html>
<head>
<!-- If you use media="screen" styles will be only available on the screen-->
<link rel="stylesheet" href="print_style.css" type="text/css" media="print" />
</head>

<body>

<h1 class="title">I am blue</h1>
</body>

</html>


As you can see in the above print_page.html we have linked our style sheet using attribute media with value print.


Now you can see styles available in the print_style.css in the print preview but not in screen. You can use media="screen" to display styles on the screen but not in print.

No comments:

Post a Comment