I want to print a html page in a specific way under css. But all the #media print examples seem to have an external .css file I want to be able to do it without an external file which means there will be no link rel tag:
<LINK REL="stylesheet" MEDIA="print...
How do I do this?
I would suggest using an external stylesheet but you can how ever do this on the same page as your HTML if you really want to, an example of this would be like so,
HTML / CSS
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
/* changes the display property to none on all
p elements when printed */
p { display: none}
}
</style>
</head>
<body>
<p>I'm here when the page isn't printed</p>
</body>
</html>
Use the #media print query in a CSS style block:
<style>
#media print {
/* print css here */
}
</style>
Make sure your closing style tag () has a space between the end of the #media print query and the closing tag. Like so:
#media print {
stuff {more stuff;}
} </style>
Right curly bracket, space, then closing tag.
Related
Hi all I'm facing a problem with printing pages.I want to have same header on all the pages im printing.I read several answers from stack seems no straigt forward answer.
thanks in advance.
Add a stylesheet for the printing of the page.
<link type="text/css" href="print.css" rel="stylesheet" media="print">
Then create a div with your hidden print-only header.
<div class="printOnly">Header</div>
Hide the printOnly div in your regular CSS file.
.printOnly { display: none; }
In your print.css, do whatever you need to do to your div. This is also where you would hide otherwise visible properties.
.printOnly { /* Style */ }
This is how I managed print styles.
So, if you have a div called normalHeader that you want gone when you print, simply set the style to display: none; on the print.css file.
For printing purposes, I removed the IMG element, but I wanted an H1 element to be displayed on another portion of the site when the IMG element is removed.
Is this possible?
You can use CSS media types for this.
Don't think of it as revealing one element when another is removed; instead think of it as selectively displaying elements depending on whether they are for print or screen.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
.screenonly { display: none; }
}
#media screen {
.printonly { display: none; }
}
</style>
</head>
<body>
<h1 class=printonly>Header for print</h1>
<h1 class=screenonly>Header for screen</h1>
</body>
</html>
Save this to a file and view it in a browser, and you will only see "Header for screen". Print the same page and you will instead see "Header for print".
This technique will work on any element and can be used to set any CSS style for print or screen.
When I use css for printing into a pdf for ex. content of my webpage it print more than I need like the header, footer, like of my webpage ,labels, the date ... etc which I don't want to print?!
Here is an example:
<html>
<body>
<img src="Snapshot_20120326.jpg"/>
<h1>Mezoo</h1>
<h2>The big member</h2>
<button onclick="window.print();">print</button>
<style media="print">
h1 ,img {
display: block;
}
h2, button{
display: none;
}
</style>
</body>
</html>
It'd probably be best to set #media print styles in a separate CSS stylesheet ...
So for example, to hide the header:
#media print {
.header, .hide { visibility: hidden }
}
You can learn more about media styling here: http://www.w3.org/TR/css3-mediaqueries/
You can use the media tag on a link.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The print css could then turn off visibility on things you don't want to see.
I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?
<html>
<body>
<style type="text/css">
body
{
font-size: 62.5%;
background-color:black;
}
h1
{
color: red;
}
#media print
{
body{
background-color:yellow;
}
h1 {
color: black;
}
}
</style>
<h1>This is just a test</h1>
</body>
</html>
The easiest way would be to create a print.css style sheet that's normally included with print media specified.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Then on your print preview screen, you could use the same print.css with screen media set:
<link rel="stylesheet" type="text/css" media="screen" href="print.css" />
I usually open a new window, write in my own generic html/body wrapper that uses the print stylesheet as the main stylesheet, the use JavaScript to copy the body from the opener to the window.
I have a print page here:
http://www.souq4cars.com/ppreview.php?id=611111161&u=10064&t=users_cars
How do i hide the links at the bottom saying 'Close Window' and 'Print Page' from being printed on the printed page?
You could use the CSS #media rule for this. To start, add a class noprint to the both elements:
<a class="noprint">foo</a>
and then add a #media print rule to your CSS which hides the elements during print:
#media print {
.noprint {
display: none;
}
}
#media print
{
div.for_hide {
display: none;
}
}
or you can include some css with this by including
<link rel="stylesheet" type="text/css" media="print" href="/css/print_version.css">
in your html code.
You have to make a new style sheet which uses different css.
<link href="style-print.css" rel="stylesheet" media="print" type="text/css">
Name divs, where you have text, that you don't want to print:
<div style="float: right;" id="print">
<strong>Print Page</strong>
</div>
In style-print.css set this divs to hidden.
#print {
display: none;
}
You should use a print stylesheet and hide the relevant elements there by setting display: none.
You can include a print sheet by adding the following between the head tags:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Normally you would set the media attribute to screen or something similar.