Home arrow DHTML arrow Page 2 - Style Sheet Property Reference

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
  1. · Style Sheet Property Reference
  2. · Colors
  3. · Pseudo-Element and Pseudo-Class Selectors
  4. · Pseudo-Classes

print this article

Style Sheet Property Reference - Colors
(Page 2 of 4 )

A color value can be assigned either via an RGB (red-green-blue) value or a plain-language equivalent (see Appendix A). For style sheet RGB values, you have a choice of three formats: hexadecimal triplet, decimal values, or percentage values. A hexadecimal triplet consists of three pairs of hexadecimal (base 16) numbers that range between values of 00 and ff , corresponding to the red, green, and blue components of the color. The three pairs of numbers are bunched together and preceded by a pound sign ( # ). Therefore, the reddest of reds has all red ( ff ) and none ( 00 ) of the other two colors: #ff0000 ; pure blue is #0000ff . Letters a through f can also be uppercase letters. (An approved notational shortcut allows you to specify one hexadecimal character when the value is intended to be a matching pair of characters. For example, #f0a is interpreted as #ff00aa .)

The other types of RGB values require a prefix of rgb() with a comma-delimited list of red, green, and blue values in the parentheses. As decimal values, each color can range from 0 through 255, with zero meaning the complete absence of a particular color. You can also specify each value by a percentage. The following examples show four different ways of specifying pure green:

  color: gree n
  color: #00ff00
  color: rgb(0, 255, 0)
  color: rgb(0%, 100%, 0%)

If you exceed the maximum allowable values in the last two examples, the browser trims the values back to the maximums.

These numbering schemes obviously lead to a potentially huge number of combina tions (over 16 million). In the early days of the web, typical PC display settings (throttled by limitations in processing power and memory) limited output to 256 colors, meaning that subtle differences among the 16 million potential colors were lost on visitors who had those settings. As a result, web content authors commonly used what became known as a web-safe palette consisting of 216 distinguishable colors. Although today’s computers have sufficient processing power and memory to accommodate millions of colors with ease, some page designers continue to adhere to the more limited palette. A fine online reference of colors that work well on all browsers and PC color display settings can be found at http://www.lynda.com/hex. asp.

The CSS2 specification adds another dimension to color naming: you can specify colors that the user has assigned to specific user interface items in the operating system’s control panel. Such colors are typically adjustable for items like button label text, scrollbars, 3D shadows, and so on. A color-blind user, for example, may have a carefully crafted set of colors that provide necessary contrast to see screen elements. Use these choices with caution, however, because even the default rendered color can vary widely between browser brands and operating systems. To link those colors to a style, use any of the following keywords in place of the color property value:









inactivecaption inactivecaptiontext infobackground
infotext menu menutext








Most style sheet rules are associated with distinct HTML elements or groups of elements identified via style sheet selectors, such as classes, IDs, and contextual selectors (see Chapter 3). Table 4-1 lists these selectors as defined in W3C recommendations through CSS3, along with mainstream browser version support. In the Format column, E  and F  stand for element (i.e., tag) names of two different elements. As shown in Appendix F, the “m18” designation in the Mozilla column indicates an early milestone release number.

Table 4-1. Primary CSS selectors

Name Format IE Mozilla Safari Opera CSS
Adjacent sibling E + F 7 m18 all 7 2
Attribute (name) E[attr] 7 m18 all 7 2
Attribute (name and E[attr="val"] 7 m18 all 7 2
Attribute (name and E[attr~="val"] 7 m18 all 7 2
any value)       
Attribute (name and any value up to hyphen)E[attr|="val"] 7 m18 all 7 2
Attribute (name and value start)E[attr^="val"] 7 1.0.1 all 9 3
Attribute (name and value end)E[attr$="val"] 7 1.0.1 all 9 3
Attribute (name and value contains)E[attr*="val"] 7 1.0.1 all 9 3
Child E > F 7 m18 all 7 2
Class E.classname 4 m18 all 7 1
Descendant EF 4 m18 all 7 1
General sibling E ~ F 7 1.7.2 n/a 9 3
ID E#id 4 m18 all 7 1
Type E 4 m18 all 7 1
Universal * 4 m18 all 7 2

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