Section III.4. Of Style Sheets, Elements, Properties, and Values

III.4. Of Style Sheets, Elements, Properties, and Values

Simply stated, a style sheet is a collection of one or more rules. Each rule has two parts to it:

• References to one or more elements (or groups of elements) that are having style sheets defined for them

• One or more style sheet properties that apply to the element(s)

In other words, each rule defines a particular look and feel as well as the item(s) in the document that are to be governed by that look and feel.

III.4.1. Style PropertiesAn Overview

A style property is the name of a (usually) visible attribute of a piece of content on the page. CSS 2.1 defines 115 separate style properties. To give you a quick overview of the range of properties for visual presentation, Table III-1 offers of summary of property names grouped by category. You can find details of all CSS style sheet properties in Chapter 4 of Dynamic.HTML, Third Edition.

CSS 2.1 accommodates the idea that browser makers might implement new properties outside the scope of the standard. It was important to define a syntax that would not conflict with possible new W3C properties in the future. Recommended formats are as follows:

 -vendorID-propertyName _vendorID_propertyName 

Mozilla browsers use this format to implement both new properties and properties that have not yet been finalized in the standards track, such as -moz-border-radius-topleft. Safari's vendor-specific styles begin with -khtml-.

Table III-1. Summary of CSS2.1 style sheet properties

Box properties
border	border-top-style	margin-top
border-top	border-right-style	margin-right
border-right	border-bottom-style	margin-bottom
border-bottom	border-left-style	margin-left
border-left	border-width	outlines
border-color	border-top-width	padding
border-top-color	border-right-width	padding-top
border-right-color	border-bottom-width	padding-right
border-bottom-color	border-left-width	padding-bottom
border-left-color	margin	padding-left
border-style
Color and background properties
background	background-image	background-repeat
background-attachment	background-position	color
background-color
Font properties
font	font-size	font-variant
font-family	font-style	font-weight
Text properties
letter-spacing	text-decoration	vertical-align
line-height	text-indent	white-space
text-align	text-TRansform	word-spacing
Visual formatting properties
bottom	left	table-layout
clear	max-width	top
clip	min-width	unicode-bidi
direction	overflow	visibility
display	position	width
float	right	z-index
height
Generated content and list properties
content	list-style-position	list-style
list-style-image	list-style-type	quotes
Paged media properties
orphans	page-break-before	widows
page-break-after	page-break-inside
User Interface properties
cursor

III.4.2. CSS Property Assignment Syntax

The syntax for assigning a value to a property is different from what you know about HTML attributes and their values. Assign a value via the colon operator (in contrast to the equal sign operator in HTML). A space after the colon is optional. The combination of a property name, colon operator, and value to be assigned to the property is called a declaration. To assign the color red to the foreground of an element, you could use either of the following simple declaration forms (colors may be specified many ways, as described in Chapter 4 of Dynamic HTML: The Definitive Reference, Third Edition):

 color: #ff0000 color: red 

If a style sheet rule includes more than one declaration, separate declarations with semicolons:

 color: #ff0000; font-size: 12pt 

A trailing semicolon after the last declaration is optional, as is a space after the internal semicolon.

Notice, however, that unlike HTML attribute values, CSS syntax property values do notand cannothave double quotes around the values, except in rare circumstances (e.g., multiword font family names).

III.4.3. Binding CSS Declarations to Elements

Defining style declarations is only half the job. The other half involves instructing the browser to apply the declaration(s) to the desired element(s). This is the job of the selector, which acts as a kind of label signifying the element or type of element to which a declaration applies. In a simple case, you bind a declaration to a single element or a single type of element (e.g., all p elements, where the label is, literally, just p). The CSS syntax for a statement combining a selector and one or more declarations is as follows:

 selector {property: value[; property: value[; ...]]} 

For example, to assign a red color and specific font size to all h1 elements, the CSS statement is:

 h1 {color: red; font-size: 24px}