the template of my website looks quite good when printed, so i have no separate print css.
However, there is one element at the top which is not needed when printed, and about 2 inches high, so that's kind of a waste at the top of the printed page (which imho distracts the user from the actual content)
So, what i want to accomplish, is 'hide' that element (div) at the top of the page when a user prints the page.
But so far the only solution i've seen is top create a separate css document which then will be used when the user will print my page. That sounds good, but do i now have to maintain 2 different stylesheets with exact the same content (besides that one div)?
Or is it possible to sort of override the standard stylesheet in the print stylesheet? (so i only have to define the exception for that one div in my print stylesheet?)
Hope this explains my problem.....
If you declare your main stylesheet to apply to all media (browsers apply it to all by default):
<link rel="stylesheet" type="text/css" media="all" href="style.css">
Then adding a print stylesheet should not require you to duplicate styles across both CSS files:
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
All you would do is add the print-specific styles to print.css.
But if you want to keep a single stylesheet, and have print-specific overrides within that one stylesheet, you can place the rules in a print media rule:
#media print {
div.do-not-print {
display: none;
}
}
I think this is what you asked vor: overriding the standard css in your print style
Related
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
Why have both? Please simplify you answer, don't go so technical.
<style type="text/css"> is when you want to have style rules embedded within the page.
<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
CSS has the #import directive, if you use <style>#import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between #import and link in CSS ).
Method 1 (using <style type="text/css">)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
What is better?
In my opinion Method 2.
Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.
The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
The first is used to insert css code directly in your html files, while the second is calling an external css file.
Usecase: Clicking on a link opens an overlay with some content in it. There are many such links on the page, each of which has a corresponding content that loads inside the overlay. User should be able to print only the particular content.
Approach: On clicking the link, I am setting a class called "printer" to the body. Inside print.css, I am hiding all the page content EXCEPT what I see inside the overlay. On closing the overlay, I am removing the class from the body.
Issue: Everything seems to be working fine on FF and IE. On Chrome the print dialog hangs, whereas on Safari, I see a blank page.
Any help would be appreciated to understand what I might be doing wrong OR if any other approach exists.
you can use media type to apply a stylesheet that is used only for print.
<link rel="stylesheet" type="text/css" media="print" href="yourPrint.css"/>
or use #import within your current stylesheet
#media print {
/* style sheet for print goes here */
}
for more info regarding this, check out w3.org http://www.w3.org/TR/CSS2/media.html
and for a less technical albeit less reliable source, http://www.w3schools.com/css/css_mediatypes.asp
Use Print CSS
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
I want to print my table that contains some css styles too. But whenever I run window.print(), the output appears without any applied css to styling headers and footers.
I've used <link rel="stylesheet" href="print.css" type="text/css" media="all" /> in my code. Also I tested it with media="print". But still I have a print preview without any style.
What should I do?
media=print should do.
Make sure you have also checked the "print images and colors" in page setup while seeing the Print Preview.
I'd like to change some things on my web page. Also I would like to make some things hidden. Is there a way I can do this with CSS when I print? In particular I want to be able to hide some DIVs and all that they contain.
This can be achieved with a separate print stylesheet. The media attribute is the key:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Yes, you need to use the media attribute when you include your css. E.g.
<link rel="stylesheet" href="my_print_style.css" media="print">
Or, you can use the media rule in your stylesheets if for example, you do not have enough changes to warrant a whole new stylesheet. Something like this,
#media print {
// print specific styles.
}
See http://www.w3.org/TR/CSS2/media.html#at-media-rule, for details and valid media types.
Answer is the CSS #media rule: http://www.w3.org/TR/CSS2/media.html#at-media-rule
I've used
<link href="print.css" type="text/css" rel="stylesheet" media="print">
To achieve this. Assign #ids or .classes to elements you don't want to display. And use display: none for those elements in print.css stylesheet.
I want to add a print button to enable users to print my web page. However when I print all the css styles are lost. It seems the printer only keeps the basic html elements. If I also want to print out the page exactly as it looks like in a browser, what should I do? I mean if I use a color printer it will print a colorful page with css styles on it. When I use a black and white printer it should print light colors as white and dark colors as grey or black.
If you have media="screen" on your link element, try to remove it or replace with media="all".
Take a look at this and this, that should help.
Basically you need to add a css print statement.
<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />
CSS style-sheets have an attribute media. It specifies to what media this css is applicable. Possible media types are listed here.
<style type="text/css" media="all">
#import "myCss.css";
</style>
OR
<link rel="stylesheet" type="text/css" media="print" href="print.css">