Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

complete css guide

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

Browser support

Get browser support information for length values in the downloadable version of this guide or our browser support tables.

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 as follows.

Length values
Name Abbrev. 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.

Percentage values

Browser support

Get browser support information for percentage values in the downloadable version of this guide or our browser support tables.

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%.

Color values

Browser support

Get browser support information for length values in the downloadable version of this guide or our browser support tables.

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

Color keywords

There are 17 color keywords, which have the following values.

These keywords are

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

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.

Decimal 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%)

URL values

Browser support

Get browser support information for URL values in the downloadable version of this guide or our browser support tables.

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)

So, Absolute URLs are written like this:

url(http://www.westciv.com/gifs/main.gif)

Relative URLs, similarly, are written:

url(../gifs/main.gif)

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

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.

resources