Home arrow DHTML arrow Style Sheet Property Reference
DHTML

Style Sheet Property Reference


If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the first part of a series, covers colors, selectors, and more. It 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 / 9
August 30, 2007
TABLE OF CONTENTS:
  1. · Style Sheet Property Reference
  2. · Colors
  3. · Pseudo-Element and Pseudo-Class Selectors
  4. · Pseudo-Classes

print this article
SEARCH DEVARTICLES

Style Sheet Property Reference
(Page 1 of 4 )

The purpose of this chapter is to provide a list of every web page style sheet property that is implemented in mainstream browsers, as well as those specified in the W3C recommendations for Cascading Style Sheets. So that you can readily see whether a particular entry applies to the browser(s) you must support, a version table accompanies each term listed in the following pages. This table tells you at a glance the version of Internet Explorer (IE), pre-Mozilla Netscape Navigator (NN), Mozilla (Moz), Apple Safari (Saf), Opera (starting from version 7), and W3C CSS specification in which the term was first introduced. Several properties removed from the specification with the publication of CSS Level 2.1 are marked with CSS version <2.1 (less than 2.1) and should not be used.

This chapter is organized alphabetically by CSS property name. For each property, you can see quickly what the value types are, an example of real-life source code, and how to address the property from the JavaScript language (if the property is scriptable). A few items implemented in available browsers are proposed for CSS Level 3, but only those that are nearing final approval are marked accordingly. Some additional items for the Mozilla, Safari, and Opera browsers are preliminary versions of forthcoming CSS3 properties. To deploy these features ahead of the formal specification, while preventing possible naming collisions with final CSS3 specifications, each browser gives these proprties a prefix that identifies the source: -moz- (Mozilla), -khtml-  (Safari), and -o-  (Opera). Note that none of these prefixes validate under CSS Level 2 due to the leading hyphen. This is intentional. Mozilla and Safari rendering engines also support a number of additional proprietary properties (with -moz- and
-khtml- prefixes, respectively) that are not intended for web pages, but for internal use (e.g., Mozilla XUL user interface elements) or applications (e.g., Apple Dashboard widgets or Macintosh applications employing WebKit). These properties are outside the realm of DHTML document creation and are therefore not described in this chapter.

Property Value Types

Many style sheet properties share similar data requirements. For the sake of brevity in the reference listings, this section describes a few common property value types in more detail than is possible within each listing. When you see one of these property value types associated with a property, consult this section for a description of the type.

Length

A length value defines a linear measure of document real estate—usually a horizontal or vertical measurement of distance, height, width, thickness, or size. Length units may be relative or absolute. A relative unit depends upon variables such as the dot pitch or pixel density of the video display that shows a document. Relative units in CSS are pixels (px), ems ( em ), and exes ( ex ). An em is the actual height of the element’s font (or inherited font) as rendered on a given display device; an ex is the height of a lowercase “x” under the same conditions. The exception to this rule is when em and ex units are used to define the font-size property, in which case the units are relative to the font size of the parent element.

Pay special attention when a relative value is to be inherited by a child element. In those circumstances, the CSS recommendation says that the child element inherits the computed value of the property (computed at the time of the property definition in the parent element’s assignment), rather than an adjusted value. For example, if the body element specifies a font-size of 20pt and a text-indent of 2em (equaling 40pt ), the text-indent value inherited by p or other elements within the body element is equal to 40pt , regardless of what the current font-size of the other elements may be. To override the inherited computed value, the p or other element needs to reassign a text-indent property for that element (or other outer container that intervenes from the body ). Mozilla, Safari, Opera, and IE for the Macintosh behave according to the recommendation. But IE for Windows, even in IE 7’s standards-compatible mode, ignores this convention. Instead, this browser family recomputes the inherited relative style assignment. Thus, in the example we just discussed, a p element with a font-size set to 10pt does not inherit the 40pt computed text-indent value from the body . Rather, the unstated text-indent value for the p element is recomputed for its 10pt font-size —an effective text-indent value of 20pt . (This type of inconsistency is indicative of occasional cross-browser difficulties with CSS in implementing pixel-perfect identical representations on all platforms.)

Pixel values, while frequently used for font sizes, present their own potential problems. A pixel, as noted earlier, varies in size with the pixel density of the output device. The higher the density, the smaller each pixel is. For printing output on 300to 600-dpi printers, browsers perform internal scaling calculations to assign more dots per pixel so that a text character sent to the printer approximates the size as viewed on the screen. But don’t expect absolutely perfect sizes on all monitors or printers. Allow for scaling approximations for all length value assignments.

Absolute length units are intended for output media with constant physical properties (such as a PostScript printer). Although there is nothing preventing you from using absolute or relative units interchangeably, you need to be aware of the consequences given your audience. Absolute length units in CSS are inches ( in ), centimeters ( cm ), millimeters ( mm ), picas ( pi ), and points ( pt ).

URI and URL (and IRI)

Universal Resource Identifier (URI) is a broad term for an address of content on the Web (while an Internationalized Resource Identifier—IRI—is an address that can include Unicode characters to accommodate non-ASCII characters). A Universal Resource Locator (URL) is a type of URI. For most web authoring, you can think of them as one and the same, because most web browsers restrict their focus to URLs. A URL may be complete (including the protocol, host, domain, and the rest) or may be relative to the URL of the current document, with one exception: if the style rule is imported from a .css file (perhaps from a different directory), a relative URL uses the path to the .css file as the base. The CSS property syntax prescribes a special format for specifying a URI property value, as follows:

  propertyName: url("actualURL")

Quotes surrounding the actualURL are optional, but recommended.

Next: Colors >>

blog comments powered by Disqus
DHTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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