Dynamic HTML: The Definitive Reference, 2rd Ed.Dynamic HTML: The Definitive ReferenceSearch this book

3.5. Of Style Sheets, Elements, Attributes, and Values

Regardless of the syntax you use to define a style sheet, the basic concepts are the same. A style sheet is a collection of one or more rules. Each rule has two parts to it:

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

3.5.1. Style Attributes

A style attribute is the name of a (usually) visible property of a piece of content on the page. An attribute such as color can apply to any element because that color can be applied to foreground content, such as text. Some attributes, such as borders and margins, can apply only to elements rendered as blocks on the page—they have a clear beginning and ending in both the HTML source code and in the layout. In their conservative approaches to claiming standards support, IE 6 and Netscape 6 promise full implementations of CSS1 (while both browsers support a lot of CSS2). To help you visualize the range of style options available as a common denominator, Table 3-1 shows a summary of CSS1 attributes grouped by category. You can find details of all CSS style sheet attributes in Chapter 11.

Table 3-1. Summary of CSS1 style sheet attributes

 

Box properties

border border-right-style margin
border-top border-bottom-style margin-top
border-right border-left-style margin-right
border-bottom border-width margin-bottom
border-left border-top-width margin-left
border-color border-right-width padding
border-top-color border-bottom-width padding-top
border-right-color border-left-width padding-right
border-bottom-color clear padding-bottom
border-left-color float padding-left
border-style height width
border-top-style    

Color and background properties

background background-image background-repeat
background-attachment background-position color
background-color    

Classification properties

display list-style-image list-style
list-style-type list-style-position white-space

Font properties

font font-size font-variant
font-family font-style font-weight

Text properties

letter-spacing line-height vertical-align
text-align text-indent word-spacing
text-decoration text-transform  

 

3.5.2. CSS Attribute Assignment Syntax

The syntax for assigning a value to an attribute 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 an attribute name, colon operator, and value to be assigned to the attribute 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 11):

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 attribute values do not—and cannot—have double quotes around the values, except in rare circumstances (e.g., multiword font family names).

3.5.3. Binding CSS Style Sheets to Elements

Defining a rule's declarations is only half the job. The other half involves identifying the HTML element(s) to which the rule applies. This is the job of the selector, which acts as a kind of label signifying the element or type of element to which a rule 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 standard also provides for additional ways of binding a declaration to a subgroup of elements scattered throughout a document (e.g., all elements sharing the same class attribute value). Finally, you can define exceptions to the grouping rules you establish in the document.



Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.