Brought to you by Style Master CSS editor
introduction ~ selectors ~ properties ~ advanced ~ real world CSS
text style | text layout | background | border | margin | padding | page layout | element type | user interface | values

values

A glance at any of the properties sections of this guide will tell you that different properties can have different kinds of value.

You probably don't really need to know all of the following, but we include it for completeness. You might like to treat it as a reference, or read through it now to get an understanding of the basic issues, then refer for more detail when you need to.

The major kinds of value are:

Any given property will be ale to take some appropriate subset of the values described below. Sometimes they will not be able to take all aspects of a given type of value, for example, not all properties that can take length values can take negative as well as positive length values.

Note that any property can also take the value inherit. This forces a selected element to inherit the given property from its parent, even when that property is not usually inherited.

Length values

Length values can be positive or negative, have a numerical value, and must be followed by a unit of measurement. Note that while length values can be either positive or negative, several properties cannot have negative length units.

There are two basic kinds of length unit, relative and absolute. As a rule of thumb, absolute units should be used only when the physical characteristics of the output device are known. This means that units like points and pixels should be avoided for monitors (because we cannot be sure of the logical resolution (Macintoshes default to 72 dpi, Windows to 96 dpi, or screen sizes). We discuss some implications of this for design and implementation of web pages in our real world CSS section of the guide. As a starting point though, you should try to use relative length values wherever it is at all possible.

The units of measurement are

unit name
abbreviation
explanation
relative?
em em the height of a font yes
ex ex the height of the letter x in a font yes
pica pc 1 pica is 12 points no
point pt 1/72 of an inch no
pixel px one dot on a screen no
millimeter mm printing unit no
centimeter cm printing unit no
inch in printing unit no

It is worth learning a little bit about each of these, as there are benefits and pitfalls in the use of each. The links section of the House of Style has pointers to a number of interesting discussions about the use of different units. A very thorough and useful coverage of these issues is given by Tod Fahrner. This is a must read for those who want to use style sheets correctly. We also discuss the issue of the appropriate use of various units in more detail in our real world CSS section.

Browser support

Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.

Percentage values

Instead of using a unit of measurement many properties can also take percentage values. You'll remember that an element is contained within another element (for example, a <paragraph> will be inside the <body>). Usually percentage values specify a percentage of the parent.

For example, specifying a width property with a percentage value means the width of an element will be the given percentage of the element which contains it. For instance, p {width: 75%} means that paragraphs will be 75% the width of their container. Often this will mean the body element.

Percentages are very valuable with positioning, as when a user resizes their window, the same basic layout can be achieved for the new window size.

The form of a percentage unit is a positive or negative sign (no sign means positive units), followed by a number, followed by the percentage sign: %. For example -25%, +15% or 15%.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

Color values

Backgrounds, text and borders can be assigned colors. Color values can be specified in one of three ways:

  • color keywords
  • hexadecimal colors
  • rgb colors

Color keywords

There are 16 color keywords, taken from the windows color palette.

These keywords are

  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • white
  • yellow

There is no exactly defined rgb value for these keywords, it is up to the browser developers to decide what they might mean. Generally all browsers render the same color keyword as the same color.

CSS2 introduced 26 keywords for system colors. These specify colors that the user interfaces of various operating systems such as the MacOS or Windows 98 use for drawing objects. These colors are

  • activeborder Active window border.
  • activecaption Active window caption.
  • appworkspace Background color of multiple document interface.
  • background Desktop background.
  • buttonface Face color for three-dimensional display elements.
  • buttonhighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elements.
  • buttontext Text on push buttons.
  • captiontext Text in caption, size box, and scroll bar arrow box.
  • graytext Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
  • highlight Item(s) selected in a control.
  • highlighttext Text of item(s) selected in a control.
  • inactiveborder Inactive window border.
  • inactivecaption Inactive window caption.
  • inactivecaptiontext Color of text in an inactive caption.
  • infobackground Background color for tooltip controls.
  • infotext Text color for tooltip controls.
  • menu Menu background.
  • menutext Text in menus.
  • scrollbar Scroll bar gray area.
  • threeddarkshadow Dark shadow for three-dimensional display elements.
  • threedface Face color for three-dimensional display elements.
  • threedhighlight Highlight color for three-dimensional display elements.
  • threedlightshadow Light color for three-dimensional display elements (for edges facing the light source).
  • threedshadow Dark shadow for three-dimensional display elements.
  • window Window background.
  • windowframe Window frame.
  • windowtext Text in windows.

Hexadecimal RGB colors

For whatever reason, the original web palette (now sRGB) used hexadecimal numbers (base 16 not base 10 numbers, and if you don't know, don't worry about it) for specifying colors. In short, these RGB colors are specified as a combination of Red Green and Blue. There can be 256 different hues of each color, (from 00 to ff - that's 0 to 255 in human speak).

CSS allows you to specify colors using this method, in the following forms:

1) The # symbol, followed by three hexadecimal numbers in the range 00 to ff. For example, #ffcc11. This is the way HTML developers know how to specify color. In this example, the red value is ff, the green value is cc and the blue value is 11.

2) The # symbol followed by three hexadecimal numbers, this time using a single digit. For example, #fc1. This is the same number as the one in the previous example, not the same as #f0c010.

RGB colors

Because humans are generally more comfortable counting to base 10 than base 16, CSS lets us use decimal rgb values. The color gamut (the total range of colors) is exactly the same, we are just specifying it in a different way.

There are two forms of this value, a numerical and a percentage form. They are interchangeable.

1) The numerical form of the color value is the following rgb(255, 255, 0). There are three numerical values, in the range from 0 to 255, one each for red, green and blue.

2) The percentage form of the rgb color value replaces the values in the range from 0 to 255 with a percentage value from 0 to 100%. For example, the above value would be written rgb(100%, 100%, 0%).

To recap, the following values are all equivalent:

green

#00ff00

#0f0

rgb(0, 255, 0)

rgb(0%, 100%, 0%)

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

URL values

Background images and list item images are specified with a URL. This url can be either absolute (that is, the full URL, e.g http://www.westciv.com/gifs/main.gif) or a relative path. But relative to what? If you were to think about it for a moment, you'd realize that it must be relative to the style sheet. Otherwise, the style sheet would only work for web pages in the same directory as it is. The problem is that Netscape Navigator 4.x gets this wrong, and treats the URL as relative to the web page! This is rectified in Netscape 6, but needs to be kept in mind when working with Netscape 4. This bug can actually be used to advantage to "hide" style sheets from Netscape 4, but have them accessible to any other browsers.

URLs have a straightforward form:

url(the url)

Absolute URLs are written like this: url(http://www.westciv.com/gifs/main.gif)
Relative URLs, similarly, are written: url(../gifs/main.gif)

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

Keyword values

Many different properties can take keyword values. A keyword value is simply a single word that is translated into a numerical value by a browser. The keywords available for a specific property will be appropriate to that particular property.

Some keyword values are relative (to the parent element). For example

  • bold and bolder for font-weight
  • small and smaller for font-size

Shape values

The uncommon shape value (it is only used currently for the clip property, introduced as part of CSS2) defines a shape. At present, there is simply a rectangle shape.

The form of the rectangle shape is:

rect( top left bottom right )

Each of top, left, bottom and right can be either a length value, or the keyword auto. auto means, at least in the clipping context, that the value of this position of the clip is the same as that of the element itself.

This value is probably going to be redefined because it doesn't follow the same basic model as the box model of CSS1, where element positions are defined by a top and left corner, along with a width and a height.

In addition, further shapes are planned.

next: advanced CSS

(C)1997-2001 Western Civilisation Pty. Ltd.