Loading ...
Create Print Friendly Webpages with CSS
This time, I’ll be explaining the printing possibilities of CSS.
Most people visiting this blog are familiar with what CSS can do. Structuring and modeling webpages. But CSS has more possibilities. You can for example, define which stylesheet works on which device. Those can be referred to by the ‘media’ attribute.
When you use an external CSS stylesheet in your webpages, you use the <style> tag. This tag has more options that only refer to the stylesheet you use on that page. You might not have used the <media> attribute yet, because it is set standard to ‘screen’.
So, standard for media is ‘screen’, when you visit a webpage you’ll see the screen.css stylesheet. When you click the file>print button, the webpage will be printed in the print.css style.
You can refer to this different stylesheets by the following codes in your tags.
1 2 3
<link rel="stylesheet" type="text/css" href="path/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="path/print.css" media="print" />
Is there a problem with this technique?
There isn’t a problem yet, but you should know what to do. As you could have thought of, the only thing that will change is the CSS, not the HTML. The structure of the webpage will stay the same, so are the id’s and classes. You have to define all those id’s and classes in the different CSS files in the same way.
Example:
In your screen.css stylesheet..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
#content{
width:300px;
height:400px;
background-color:#333333;
margin:4px;
padding:5px;
font-size:13px;
font-color:#ffffff;
}
Your print.css stylesheet..
1 2 3 4 5 6 7 8 9 10 11
#content{
width:300px;
height:400px;
font-size:13px;
font-color: #000000;
}
As you can see, the general structure remains the same. All the backgrounds are removed in the print.css stylesheet, and text colors have to be readable in a printed version.
You could have, for example, advertisements or links on your webpage. You might not want them to display on the printed page, but you can’t change the HTML of the page. There’s a simple trick for not displaying HTML.
When a div has id ‘ads’, you can make sure nothing is displayed from inside that div, by adding this code in your print.css file.
1 2 3 4 5
#ads{
display:none;
}
This line will make sure nothing is shown.
One simple tip, if you use links that doesn’t have an underline, only when hovered, make sure you change this in prints. It’s handy for people to see where the link suppose to be.
That’s it! Thanks for reading.
Nice article….thanks a lot…!!!!
Why does everyone hide the name WordPress on their blogs?
Anyone worth a dime knows you are using WordPress, so give them some credit will ya!
hint: “credit” // “Powered by WP” in footer
Good post m8. I’d also suggest not confining the width of your div containers and just kind of letting them run free. width:100%;
@Craig W -> you are right, I used too have the standard WordPress blog description, but I changed that. I’ll add the copyright.
@Patrick -> Thanks, just a detail.
I couldn’t understand some parts of this article How to create print-friendly webpages with CSS., but I guess I just need to check some more resources regarding this, because it sounds interesting.
[...] I’m back, I’ve wrote an article on the printing possibilities of CSS. Read it if you like. What’s up next. I think I try to expand my knowledge on Javascript, [...]
Great post helped me out a lot! Thanks!
Pretty handy post. I am just starting to do print stylesheets
I am interested, but not clear on the function of the ‘media’ attribute when calling a style sheet or style rules.
This is brilliant I was just searching google for this, thankyou very much!!!
Great post. Thanks for sharing!I also have an online printing website to recommend. Check out at my website.139
That’s cool for being able to print web pages. I need to install this because right now my pages come out all chopped when I print them…Thanks! Sharon
thanks i really needed to figure out this css stuff
Good job. Thank you for informing me.
Nice work. I’m still new to CSS and this article gave me some useful information. Thank you for that. You’ve got a awesome blog too. Appreciate the work and on the great job on the article. Cheers.
Nice work. helped me with most of my stuff. Worked out really well when I tried and just thought to drop a word and thank you. Cheers