Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to use the same CSS stylesheet for print media and the default layout?

I am looking for a way to use the same stylesheet for print media as for the default onscreen layout. The advantage to me will be that I won't have to update 2 files every time I update the CSS. I would prefer to have one stylesheet and specify special rules for print media by denoting them somehow… It may not be possible, but I thought I'd put the question out there.

like image 847
Michael Swarts Avatar asked Jul 26 '09 21:07

Michael Swarts


People also ask

How do I write CSS for print media?

You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version. You have seen @media rule in previous chapters. This rule allows you to specify different style for different media.

What is stylesheet in print media?

What Does Style Sheet Mean? A style sheet is a file or form that is used in word processing and desktop publishing to define the layout style of a document. A style sheet contains the specifications of a document's layout, such as the page size, margins, fonts and font sizes.

How do you print using CSS?

Developer Tools. The DevTools ( F12 or Cmd/Ctrl + Shift + I ) can emulate print styles, although page breaks won't be shown. In Chrome, open the Developer Tools and select More Tools, then Rendering from the three-dot icon menu at the top right. Change the Emulate CSS Media to print at the bottom of that panel.

What is the valid media type for @media?

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types. Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.


1 Answers

If you want the styles to be the same across all media, just define the common styles in the stylesheet as normal (i.e. not in any media rule) then put the media specific elements in the relevant rules.

If you want some styles to apply to a subset of media, you can do it like this:

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

Here's a link to the relevant W3C page

like image 115
Rich Seller Avatar answered Oct 27 '22 22:10

Rich Seller