Home arrow DHTML arrow Color, Filters, and Other Style Sheet Properties

Color, Filters, and Other Style Sheet Properties

Continuing with our multi-part series on style sheet properties, this fourth part of the series covers color, filters, 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 / 12
September 20, 2007
  1. · Color, Filters, and Other Style Sheet Properties
  2. · Alphabetical Property Reference: Cursor
  3. · Alphabetical Property Reference: Elevation
  4. · Alphabetical Property Reference: Filters

print this article

Color, Filters, and Other Style Sheet Properties
(Page 1 of 4 )

Alphabetical Property Reference: Color

IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Defines the foreground text color of the element. For some graphically oriented elements, such as form controls, the color property may also be applied to element edges, checkmarks, or other features. Such extracurricular behavior is browser-specific and may not be the same across browsers.

CSS Syntax

color: color


See the discussion of color property values at the beginning of this chapter.

Initial Value         black

Example                 th {color: darkred}

Applies To              All elements .

Object Model Reference


IE n/a NN n/a Moz all Saf all Op all CSS 2

Inherited: No

Defines the actual content or source of content to be displayed before and/or after the current element. In CSS jargon, this kind of content is called generated content. This property may be set only with the :before and :after pseudo-elements associated with a real element. For example, as a result of the following style sheet rule:

  blockquote:after {content:"(Reprinted by permission.)"}

a permissions phrase is appended to the end of every blockquote element, although the content does not become a member of the document tree. HTML tags in the content text are not interpreted, but if the situation warrants it, an external document can be assigned to the content property.

CSS Syntax

content: string | uri | counter | attr(attrName) | open-quote | close-quote |
no-open-quote | no-close-quote | none | normal


The purpose of the “no” quote types is to let you specify the effect of a quote (as far as quote nesting goes) without displaying a quote symbol. Multiple space-delimited strings may follow the content: property name.

Another value ( counter ) is not yet supported by all browsers (see counter-increment ), but its potential is significant for documents that would benefit from client-side section number generation. A CSS counter offers a way for a style sheet to control numbering schemes for sequences of elements (such as sections, illustrations, and the like). The assumption is that the numbering is not part of the actual content, but is determined solely by the rendered context of the element within the document. Therefore, if you remove a numbered paragraph from a document in the edit phase, the paragraph numbering of the document adjusts itself automatically when the page is rendered.

The basic operation of a counter entails assigning an identifier to it (thus allowing multiple counters to exist in the same document, such as one for sections, another for subsections). Other CSS properties ( counter-increment and counter-reset ) require values that point to an identified counter to control the numbering sequence. The following style sheet rule inserts a section label and number in front of every h1 element, and increments the counter number each time the style is applied to an h1 element while the document renders:

  h1:before {counter-increment: secNum ;
             content: "Section " counter(secNum) ". "}

When counters are implemented in mainstream browsers, they will provide substantial power to highly structured, long documents.

Initial Value     "" (empty string)

Example            p.note:before {content: "==>"}

Applies To       All elements plus a :before and/or :after pseudo-element.

counter-increment, counter-reset
IE n/a NN n/a Moz 1.8 Saf n/a Op 7 CSS 2

Inherited: No

These properties control the numbering sequence of a CSS counter used for generated content (see the content property). The counter-increment property sets the amount (and direction) of change each time the counter is accessed during rendering. The counter-reset property lets you set the counter to a specific number (default of zero).

CSS Syntax

counter-increment: counterID [ posOrNegInteger ] | none
counter-reset: counterID [ posOrNegInteger ] | none


A counterID  is an identifier assigned to a content: counter(counterID) style property. The optional integer value is space-delimited after the counterID . You can combine multiple counter IDs in the same style property by stringing together space-delimited pairs of ID and integer values.

Initial Value         none

Example             h1 {counter-reset: subSection}

Applies To          All elements.

IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS 2

Inherited: No

For aural style sheets only, this property provides a shorthand for setting cue-before and cue-after property settings. A cue is a sound (also known as an auditory icon) that can be used to aurally delimit the reading of document content. Cue properties are URIs to sound resources.

CSS Syntax

cue: cue-before || cue-after


If there are two values, the first is applied to the cue-before property and the second to the cue-after property. If there is only one value, the same auditory icon is applied to both cue-before and cue-after .

Initial Value       none

Applies To                   All elements.

cue-after, cue-before
IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS 2

Inherited: No

For aural style sheets only, a cue is a sound (also known as an auditory icon) that can be used to aurally delimit the reading of document content. The cue-before and cue-after properties are URIs to sound files that are to be played before and after the content is rendered via text-to-speech or another aural medium.

CSS Syntax

cue-after: uri | none
cue-before: uri | none


Any valid complete or relative URL (in CSS format) to a sound file in a MIME type supported by the browser. You may apply the same values to both properties for the same style selector if it makes aural sense for the listener.

Initial Value         none

Example        li {cue-before: url(ding.wav); cue-after: url(dong.wav)}

Applies To            All elements.

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