CSS font stacks, media style sheets & web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
25% off cpanel web hosting and reseller hosting deals. Promo: codestyle25off
This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQs, or choose the single FAQ by email option for premium answers.
style elements?
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".
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How should I apply alternate stylesheets with different media?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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 CSS 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.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
Which mainstream browsers support aural stylesheets?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: The CSS declarations for requesting page breaks are given below, but these are only suggested values. Not all browsers support these properties.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How do I print one image per page?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I place a different image on the first page?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I control print headers and footers with CSS?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I put a logo and VAT statement at the top of every page?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: The easiest and most reliable way to manage print media styling is to have a separate print style sheet attached to your web page using a media dependent link element. That's a standard style sheet link with a media="print" attribute, as below.
<link rel="stylesheet" type="text/css" href="..." media="print" />
The style sheet rules attached by a print media link element will only apply when the web page is printed, not in standard screen display mode.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: The simplest way to create larger lettering when you print a web page is to create a print media style sheet with a CSS rule for the body element. Since all elements contained by the body element inherit its properties, a single proportional font-size declaration will be applied to all parts of the whole document.
body {
font-size: larger;
}
This font rule makes all element text larger than in screen mode. You could also use a percentage value to be more precise.
body {
font-size: 110%;
}
As with standard style sheets, a print style sheet may target specific parts of a document using other element selectors, class and ID selectors. Some Web browsers, such as Opera, allow you to specify a "user" style sheet for all Web sites you visit, and this may also include print media rules.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I suppress printing of navigational elements?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I print tabs hidden with display: none?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
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...
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I disable print preview?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
| Front-end FAQs | Back-end FAQs | Learning Java |
|---|---|---|
About us: site help, text ads, sponsored links and premium content FAQs.
