9.3 Style Properties | Webmaster in a Nutshell, Third Edition


Team-Fly

	Webmaster in a Nutshell, 3rd Edition By Robert Eckstein, Stephen Spainhour
	Table of Contents

	Chapter 9. Cascading Style Sheets

9.3 Style Properties

At the heart of the CSS specification are 53 properties that let you control how the styles-conscious browser presents your documents to the user . The standard collects these properties into six groups: fonts, colors and backgrounds, text, boxes and layout, lists, and tag classification. You'll find a summary of the style properties later in this chapter.

9.3.1 Property Values

There are five distinct kinds of property values: keywords, length values, percentage values, URLs, and colors.

9.3.1.1 Keyword property values

A property may have a keyword value that expresses action or dimension. For instance, the effects of underline and line-through are obvious property values. And you can express property dimensions with keywords like small and xx-large. Some keywords are even relational: bolder, for instance, is an acceptable value for the font-weight property. Keyword values are not case-sensitive: Underline, UNDERLINE, and underline are all acceptable keyword values. Keywords also cover such properties as font-family names .

9.3.1.2 Length property values

So-called length values (a term taken from the CSS standard) explicitly state the size of a property. They are numbers , some with decimals, too. Length values may have a leading + or - sign to indicate that the value is to be added to or subtracted from the immediate value of the property. Length values must be followed immediately by a two-letter unit abbreviationwith no intervening spaces.

There are three kinds of length-value units: relative, pixels, and absolute. Relative units specify a size that is relative to the size of some other property of the content. Currently, there are only two relative units: em, which is the height of the current font, and x-height, which is the height of the letter "x" in the current font (abbreviated ex). The pixels unit, abbreviated px, is equal to the size of a pixel on the browser's display. Absolute property value units are more familiar to us all. They include inches (in), centimeters (cm), millimeters (mm), points (pt, 1/72 of an inch), and picas (pc, 12 points).

All of the following are valid length values, although not all units are recognized by all browsers:

 1in 1.5cm +0.25mm -3pt -2.5pc +100em -2.75ex 250px

Since CSS in this instance is mostly used for screen display, you should generally use pixels (px) as the length property.

9.3.1.3 Percentage property values

Similar to the relative length-value type, a percentage value describes a property size relative to some other aspect of the content. It has an optional sign and decimal portion to its numeric value and must have the percent sign (%) suffix. For example:

 line-height: 120%

computes the separation between lines to be 120% of the current line height (usually relative to the text font height). Note that this value is not dynamic, though: changes made to the font height after the rule has been processed by the browser will not affect the computed line height.

9.3.1.4 URL property values

Some properties expect a URL as a value. The syntax for using a URL in a style property is different from conventional HTML:

 url(  service  ://  server.com  /  pathname  )

The keyword url is required, as are the opening and closing parentheses. Do not leave any spaces between url and the opening parenthesis. The url value may contain either an absolute or a relative URL. However, note that the URL is relative to the immediate style sheet's URL, the one in which it is declared. This means that if you use a url value in a document-level or inline style, the URL is relative to the HTML document containing the style document. Otherwise, the URL is relative to the imported or linked external style sheet's URL.

9.3.1.5 Color property values

Color values specify colors in a property. You can specify a color as a color name or a hexadecimal RGB triple, as is done for common HTML attributes, or as a decimal RGB triple unique to style properties. Both color names and hexadecimal RGB triple notation are described in Chapter 8.

Style sheets accept three-digit hexadecimal color values. The single digit is doubled to create a conventional six-digit triple. Thus, the color #78C is equivalent to #7788CC. In general, three-digit color values are handy only for simple colors.

The decimal RGB triple notation is a bit different:

 rgb(red, green, blue)

The red, green, and blue intensity values are integers in the range 0 to 255 or integer percentages. As with a URL value, do not leave any spaces between rgb and the opening parenthesis.

For example, in decimal RGB convention, the color white is rgb(255, 255, 255) or rgb(100%, 100%, 100%), and a medium yellow is rgb(127, 127, 0) or rgb(50%, 50%, 0%).

9.3.2 Property Inheritance

In lieu of a specific rule for a particular tag, properties and their values for tags within tags are inherited from the parent tag. Thus, setting a property for the <body> tag effectively applies that property to every tag in the body of your document, except for those that specifically override it. So, to make all the text in your document blue, you need only say:

 BODY {color: blue}

rather than create a rule for every tag you use in your document.

This inheritance extends to any level. If you later created a <div> tag with text of a different color, the styles-conscious browser displays all the text contents of the <div> tag and all its enclosed tags in that new color. When the <div> tag ends, the color reverts to that of the containing <body> tag.


Team-Fly

Top