Learning Style Sheet Properties

(Page 1 of 4 )

In this second part of a series on style sheet properties, you'll learn how to handle code for backgrounds, borders, and more. This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

At-Rules

CSS2 defines an extensible structure for declarations or directives (commands, if you will) that are part of style sheet definitions. They are called at-rules because the rule starts with the “at” symbol (@) followed by an identifier for the declaration. Each at-rule may then include one or more descriptors that define the characteristics of the rule.

Although at-rules typically appear as the first declarations in a style sheet, in practice some ( @media in particular) work best when only one occupies each style sheet. The following sequence provides different style characteristics for a document when viewed on screen and printed on paper (relative font size on the screen, absolute on paper):

  <style type="text/css" >
  @media screen {
      body {font-size: 14px}
  }
  </style>
  <style type="text/css">
  @media print {
      body {font-size: 12pt}
  }
  </style>

The @font-face rule can be used to download font definition files to the IE browser, and associate each font definition with a font family name to be assigned by succeed ing style assignments. Here is an example that downloads one of the Internet Explorer accepted font file formats, assigning the definition to a font family name called Stylish:

  <style type="text/css">
  @font-face {
      font-family: Stylish;
      font-weight: normal;
      font-style: normal;
      src: url(fonts/stylish.eot) ;
  }
  </style>

IE allows you to define multiple @font-face rules in the same style sheet. Visit http:// msdn.microsoft.com/workshop/author/fontembed/font_embed.asp for details on how to create font definition files that work with IE for Windows and Macintosh.

Already supported by a few mainstream browsers, CSS3 namespaces are initially declared via the @namepace rule. Any subsequent selectors that wish to reference an element name defined in the namespace must cite the namespace name, followed by a pipe character ( | ), and then the element name. For example, the following rules would apply the blue color only to td elements defined in the products namespace:

  @namespace products url(http://www.example.com/DTD/productDB); 
  products|td {color: blue}

Table 4-5 provides a summary of the at-rules supported by CSS and mainstream browsers.

Table 4-5. CSS at-rules

Name	IE/Windows	Mozilla	Safari	Opera	CSS	Description
@namespace	n/a	1.0.1	1.3/2	9	2	Character set used for external style sheet file.
@charset	5	m18	n/a	7	2	Character set used for external style sheet file.
@font-face	4	n/a	n/a	n/a	n/a	Font description to assist in font-matching between an embedded font and the client system font (or downloaded font).
@import	4	m18	all	7	1	Imports an external style sheet. See Chapter 3 for the impact on the cascade.
@media	5	m18	all	7	2	Defines an output media type for one or more style sheet rules. Rules assigned to the same selectors but inside different @media rules (e.g., @mediaprint or @media screen ) adhere to media-specific rules when the document is rendered in the specified medium.
@page	n/a	n/a	n/a	7	2	Defines the page box’s size, margins, orientation, crop marks, and other page-related properties governing the printing of the document.

Conventions

The CSS syntax descriptions shown throughout this chapter adhere to the following guidelines:

1. Words in the Constant Width font are keywords or constant values to be used as-is.
   
2. Words in the Constant Width Italic  font are placeholders for values.
   
3. A value contained by square brackets ( [] ) is optional.
   
4. A series of two or more values separated by a pipe symbol ( | ) represent items in a list of acceptable values to be used in the position shown.
   
5. A few listings show numbers in brackets ( {1,2} ) after a value. The numbers indicate the minimum and maximum numbers of space-delimited values you can specify.
   
6. A double-pipe symbol ( || ) separating multiple values indicates that one or more of the values must be present, but the order is not significant.

The “Applies To” category advises which HTML elements can be influenced by the style property. Some style properties can be applied only to block-level, inline, or replaced elements. A block-level element is one that always starts on a new line and forces a new line after the end of the element ( h1 and p elements, for example). An inline element is one that you can place in the middle of a text line without disturbing the content flow ( em elements, for example). A replaced element is a block-level or inline element that has content that may be changed dynamically without requiring any reflow of surrounding content. The img element falls into this category because you can swap image source files within an img element’s rectangular space.

A listing category called “Initial Value” serves the same purpose as the “Default” category in other reference chapters. The terminology used in this chapter conforms with the terminology of the CSS specification.

Many items contain a category called “Object Model Reference” to show the way scripts can reference the property as properties in a browser’s document object model—specifically, as properties of the style object. Consult Chapter 2 for compatibility ratings for the scripted equivalents of style properties, as they frequently differ from the style sheet property implementations shown in this chapter.

Next: Alphabetical Property Reference >>
 

More DHTML Articles
More By O'Reilly Media

Comments On: Learning Style Sheet Properties

· This article is an excerpt from the book "Dynamic HTML: The Definitive Reference,...   >>> Post your comment now!

Buy this book...

This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.