Change font size for print in CSS
I have an HTML file that contains a log report. I want to print this report with a smaller text size. I tried with below CSS styling but the text size was not changed. How to solve it.
<HTML>
<HEAD>
<TITLE>Events</TITLE>
<STYLE type="text/css">
table, th, td
{
border: 1px solid #cccccc;
border-collapse:collapse;
padding: 5px;
}
</STYLE>
<STYLE type="text/css" media="screen">
#eventText {
display: block; overflow-y: auto; height: 600px;
width: auto; left: 0px; top: 50px; font-size: 0.25em;
}
#eventButtons { display: block; }
</STYLE>
<STYLE type="text/css" media="print">
body { margin: 0; background-image: none; font-size: 0.25em }
#eventText {
display: block;
overflow-y: visible;
height: auto;
margin:0;
font-family: geneva, arial, helvetica, sans-serif;
font-size: xx-small;
}
#eventButtons { display: none; }
</STYLE>
</HEAD>
<BODY>
<div id="eventButtons">
<INPUT TYPE="BUTTON" VALUE="View" onclick="javascript:loadValues();">
<INPUT TYPE="BUTTON" VALUE="Print" onclick="javascript:window.print();">
</div>
<div id="eventText"> </div>
</BODY>
</HTML>
+3
source to share
2 answers
Your exact solution is to use @media rule in CSS
You can set the CSS to change the styles of the elements when the web page tries to print. The following CSS will set the background color to white on all DIVs when printed.
@media print{
div{
background-color: #FFFFFF;
}
}
You can easily set the fonts of the elements of your choice this way, although you can do a lot more with it.
Read more about @media rules here .
+5
source to share