Working  with
Cascading Style Sheets
Designing a Style for a Web Site at Maxwell Scientific

Other Selector Forms

E1 > E2

This selector is used for an element, E2, that is a direct descendant of the parent element, E1.

E1 + E2

This selector is used for an element, E2, that directly follows the element, E1, in the Web page.

E[attribute]

This selector is used for an element, E, that contains the specified style attribute.

E[attribute = value]

This selector is used for an element, E, that contains a specified style attribute, with a specified value.

E[attribute ~= value]

This selector is used for an element, E, that contains a specified style attribute, that contains part of a specified value (used only for text strings.)

Note that all browsers do not support some of these selector forms. You should always test your page against various browser versions.

WebFonts

To access a Web font, the syntax is:

@font-face {font-family: "font_name"; src: url(URL) }

where font_name is the name assigned to the font, and URL is the URL of the WebFont file. For example, the following style declarations:

<STYLE>

@font-face {font-family: "Broadway"; src:=url(http://www.WebFonts.com/broadway) }
H1 {font-family: Broadway, Arial, serif}

Netscape's Background Blues

A similar problem occurs with the padding space around the box content. If you set a background color for the box, the padding space will not acquire that background color in Netscape. To get around this problem, you have to specify the following style declaration for the element:

border: 1px solid none;

This will have no visual effect on the element, but Netscape will now draw a transparent border around the element 1 pixel in width. More importantly, the padding space will now acquire the background color.

The Resizing Bug

One workaround is to create a JavaScript program to do this reloading for you automatically whenever the browser window is resized in Netscape. A simple program to do this is:

<SCRIPT>
  <! Hide from older browsers
   isNS = document.layers;
   if (isNS) {
      saveWidth = innerWidth;
      saveHeight = innerHeight;
   }
 function reStyle() {
   if (innerWidth != saveWidth || innerHeight != saveHeight)
     location.reload();
   }
   if (isNS) onresize = reStyle;
   // Stop hiding>
  </SCRIPT>

You can insert this program in any Web page that uses styles if you want to avoid this problem for Netscape users.

Internet Explorer's Floating Bug

Controlling Printing with CSS2

@page

Before printing the page, the browser needs to know the page dimensions, including the width of the margins and the orientation of the page. To specify the page dimensions, use the attribute:

size: values

where value can be either the width and height of the page, the value "portrait" (for portrait-oriented output), the value "landscape" (for landscape-oriented output) or "auto" (to leave the printing size to the operating system. For example, to specify a page size of 8.5 inches wide by 11 inches high, use the attribute:

@page {size: 8.5in 11in}

or to specify landscape orientation for the printout, use the attribute:

@page {size: landscape)

To control the size of the page margins, use the margin attribute, as follows:

@page {margin: 1in}

to create a 1 inch margin around the page content. If you want to specify different margin sizes, use the following attributes:

@page {margin-top: 0.5in; margin-right: 1in; margin-bottom: 1in; margin-left: 0.5in}

to create a top and left margin of 1/2 inch, and right and bottom margins of 1 inch.

One common problem in printing a Web page is the lack of control over the page breaks. Often the page break will occur at the least convenient spot. You can control this using the following attributes:

• page-break-before
• page-break-after
• page-break-inside

The page-break-before attribute indicates that a page break should occur before the element. This attribute can have the values: auto, always, avoid, left, right, or inherit. The "auto" value allows the operating system to determine the page breaks. The "always" value will always create a page break before the element, while the "avoid" value will always prevent a page break before the element. The "left" and "right" value create page breaks that result in the page in printed as a "left" page or as a "right" page (a "left" page is one that appears on the left size of the fold when printing pages that are to be bound in a book.) The "inherit" value cause the element to inherit whatever page-break-before settings are used for the parent element.

The page-break-after attribute operates the same way, except that it controls the placement of page breaks after the element.

The page-break-inside attribute controls whether a page break can occur within the element's contents. The three values for the page-break-inside attribute are: avoid (to prevent a page break), inherit (to inherit the page-break-inside settings from the parent element), or auto (to leave the page break settings to the operating system.) For example, to keep paragraphs all on one page, use the style:

P {page-break-inside: avoid}

Another way to control page breaks is through widows and orphans. A widow is a typographical term for an isolated line (or lines) at the top of a page. For example, if a page break occurs within a paragraph, the lines placed at the top of the page are called widows or widow lines. The widow attribute can be used to specify the maximum number of widow lines. To set the maximum value to two lines for every paragraph, use the style:

P {widow: 2}

Similarly, orphans are lines left at the bottom of a page. To control the size of the orphan or orphan lines, use the orphan attribute. For example, the style:

P {orphans: 2}

will limit the size of the orphan lines to two lines for every paragraph in the document.

You can learn more about the different CSS2 styles for controlling printed pages by visiting the W3C page at http://www.w3.org/. Once again, be aware that these styles are not yet supported by all browsers.