www.codestyle.org

Media style sheets FAQ

This FAQ is part of the Code Style Help and FAQ section. Use the help request form below if your question is not answered here, but make sure you are asking the right question first.

Subscribe to this FAQ:

Paged media questions

Q: How can I print in a serif font?

A: To print a Web page with a serif style font, you should create a print media stylesheet with a font-family rule as below.

body {
  font-family: serif;
}
      

The style sheet should be attached to the document using a link element with print media attribute, like this:

<link rel="stylesheet"
    media="print"
    href="/styles/Print.css" />
      

To print in sans serif style, change the rule to font-family: sans-serif.

Q: How do I print one image per page?

A: The CSS declarations for requesting page breaks are given below, but these are only suggested values. Not all browsers support these properties.

More details available to subscribers:
How do I print one image per page?

Q: How can I place a different image on the first page?

A: With CSS level 2 user agents you can apply special case styling to the first page using the :first pseudo-class on the @page selector, but this is restricted to page size, margins and other outline printing features, and cannot be combined with body or image selectors or background properties. See CSS2: Paged media for details.

More details available to subscribers:
How can I place a different image on the first page?

Media style sheet questions

Q: How should I apply alternate stylesheets with different media?

A: First, to declare any alternative stylesheet, you must set the rel attribute in the relevant link element to alternate stylesheet. To apply this style to specific media types, also set the media attribute to those you require in a comma separated list, e.g. "print, projection".

More details available to subscribers:
How should I apply alternate stylesheets with different media?

Q: Do you have results for media dependent style elements?

A: The style element defeats one of the greatest strengths of CSS, its external reference format. HTML style elements generally introduce significant code redundancy and increase the complexity of site management.

Having said this, the absence of browser compatibility results for media dependent style elements is a shortcoming of the Code Style media monitor test suite. Such tests would expand the permutations of stylesheet attachment significantly and this is not a task that is currently under consideration.

Q: Which mainstream browsers support aural stylesheets?

A: Neither Internet Explorer or Netscape support aural stylesheets; that is, neither browser will read Web page content out loud by themselves. Both browsers can be configured with screen reader software to read pages, but these facilities are not directly related to the use of aural stylesheets.

More details available to subscribers:
Which mainstream browsers support aural stylesheets?

Print media styling

Q: How can I control print headers and footers with CSS?

A: The page numbers, URL, date and other peripheral information that may be printed with a Web page cannot be controlled by CSS in mainstream Web browsers. CSS properties can only affect the so-called canvas area of the browser, the part where the HTML is rendered, not browser-specific features like page headers and footers.

More details available to subscribers:
How can I control print headers and footers with CSS?

Q: Can I set standard page margins for all users?

A: It is not possible to adjust the master page margins beyond those enforced by the initial printer configuration, which is usually the maximum printable area for the device. If you set a negative margin on the body of the document, any content at the edges will not print. If you set any positive margin on the body, it is adjusted inwards from the current settings of the printer.

Q: How can I suppress printing of navigational elements?

A: To save readers from printing navigational elements, interactive forms and other content that is only relevant in screen mode, assign specific class attributes to these elements and use a print media stylesheet to control the display property of these elements.

More details available to subscribers:
How can I suppress printing of navigational elements?

Q: My print style sheet is suppressing images!

A: There is nothing implicit in a print style sheet that would prevent images from printing. However you want the pages to appear when printed, it must be declared in the rules of your print media style sheet. If you do not have an explicit rule for image elements, it may be that the container element for the images is set to not display, hence nothing it contains displays either.

Check the HTML structure your images are set in and check the print media style rules. It may help to comment out sections of the print media style sheet and re-test. To save paper, the print preview option in Internet Explorer, Firefox and the Opera web browser all take account of print style sheets.

Q: How can I print tabs hidden with display: none?

A: It is difficult to say exactly what the solution is without seeing your source code. If your tabs are marked up as div elements and your Javascript sets their display property to none, then your print style sheet would need to set the display property to block.

More details available to subscribers:
How can I print tabs hidden with display: none?

Q: How can I disable print preview?

A: Print preview is a Web browser feature rather than an HTML or CSS feature, but many browsers use print style sheets to render their print preview display. The simplest way to show a blank screen when the user selects print preview is to set the display property on the body element in your print media stylesheet...

More details available to subscribers:
How can I disable print preview?

Q: How can I put a logo and VAT statement at the top of every page?

A: The main design decision you have to take is how to place the images and VAT statement on the pages. The simplest approach would be to define a class selector that would not be displayed in screen media mode, but has a background image and page break rules in print media mode, as below.

More details available to subscribers:
How can I put a logo and VAT statement at the top of every page?

Help request

Use the form below to submit a help request or general enquiry about the Code Style Web site. Read our guidelines on asking the right questions first.

Name:
Email*:
Example URL:
Comments:
Do NOT put any URLs here
Join mailing list:	Yes, join the mailing list No
* Required fields

Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request it. Read the site privacy statement for details.

Navigation

• Home page
• CSS style guide
  • Font sampler
  • Media monitor
• Java & servlets
• Javascript & DOM
• HTML & XHTML
• Help and FAQs
• Site log

Site search

Home · CSS · Java · Javascript · HTML · Help · Log

Copyright © 2000-2008 Philip Shaw, all rights reserved, terms and conditions apply.
Valid XHTML and correct CSS. Last updated 14 June 2008 at 17:32:06 PM BST.
URI: http://www.codestyle.org.uk/css/media/FAQ.shtml Metadata: RDF RSS 1.0