Home arrow DHTML arrow Learning Style Sheet Properties

Learning Style Sheet Properties

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.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
September 06, 2007
  1. · Learning Style Sheet Properties
  2. · Alphabetical Property Reference
  3. · Alphabetical Property Reference through Behavior
  4. · Alphabetical Property Reference: Border

print this article

Learning Style Sheet Properties
(Page 1 of 4 )


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 type="text/css">
  @media print {
body {font-size: 12pt}

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) ;

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.


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.

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials