CSS font stacks & developer FAQs with Web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Web hosting directory, find affordable web hosting
Fastwebhost offers cheap web hosting & reseller hosting services
This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQ answers.
plain text, on topic, no spam
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".
… full answer hidden
Premium members click below for full answer
How should I apply alternate stylesheets with different media?
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.
A: No mainstream browsers support aural stylesheets; that is, no browser will read Web page content out loud by themselves. Browsers can be configured with screen reader software to read pages, but these facilities are not directly related to the use of aural stylesheets.
… full answer hidden
Premium members click below for full answer
Which mainstream browsers support aural stylesheets?
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.
A: How you resize a page for print media will depend how you have set up the styles for screen mode. If you have a fluid page layout and use proportional font sizes, it may be as simple as scaling the body element width property and font-size, as below. The cascade aspect of Cascading Style Sheets should carry this resize down through all child elements, proportionally resizing everything on the page.
body {
width: 95%;
font-size: 95%;
}
If you use any combination of fixed width elements in the body of your document, it will be necessary to remove them from the print version using display: none or change them to proportional widths. Some browsers may "zoom" pages to fit outsize content onto a printed sheet, which will squeeze the contents in addition to your CSS rules. Remove unnecessary navigational and interactive page elements and set proportional widths throughout to simplify and enable your page to re-flow better. This may take quite a bit of trial and error, so remember to use print preview to preserve paper.
A: The CSS declarations for requesting page breaks are given below, but these are only suggested values. Not all browsers support these properties.
… full answer hidden
Premium members click below for full answer
How do I print one image per 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, and the example below.
… full answer hidden
Premium members click below for full answer
How can I place a different image on the first page?
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.
… full answer hidden
Premium members click below for full answer
How can I control print headers and footers with CSS?
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.
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.
… full answer hidden
Premium members click below for full answer
How can I put a logo and VAT statement at the top of every page?
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.
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.
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.
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.
… full answer hidden
Premium members click below for full answer
How can I suppress printing of navigational elements?
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.
… full answer hidden
Premium members click below for full answer
How can I print tabs hidden with display: none?
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...
… full answer hidden
Premium members click below for full answer
How can I disable print preview?
| Front-end FAQs | Back-end FAQs | Learn Java |
|---|---|---|
About us: site help, text ads and premium content FAQs.