HTML The Definitive Guide by Bill Kennedy Chuck Musciano

Author:Bill Kennedy, Chuck Musciano [Bill Kennedy, Chuck Musciano]
Language: eng
Format: epub
Published: 0101-01-01T00:00:00+00:00

Chapter 9

Cascading Style Sheets

9.2 Style Syntax

The syntax of a style, as you may have gleaned from our previous examples, is fairly straightforward.

9.2.1 The Basics

A style rule is made up of at least three basic parts: a tag selector, which identifies the name of the tag that the style rule affects, followed by a curly brace ({}) enclosed, semicolon-separated list of one or more style property:value declaration pairs: tag-selector {property1:value1; property2:value1 value2 value3; ...}

Properties require at least one value, but may include two or more values. Separate multiple values with a space, as is done for the three values that define property2 in the example. Some properties require that multiple values be separated with commas.

Styles-conscious browsers ignore letter case in any element of a rule. Hence, H1 and h1 are the same selector, and COLOR, color, ColOR, and cOLor are equivalent properties. Convention dictates, however, that tag names be all uppercase, and that properties and values be lowercase. We'll abide by those conventions throughout this book.

Any valid HTML tag name (a tag minus its enclosing < and > characters and attributes) can be a selector. You may include more than one tag name in the list of selectors, as we explain in the following sections.

9.2.2 Multiple Selectors

When separated by commas, all the tags named in the selector list are affected by the property values in the style rule. This can make life very easy for the HTML author. For instance: H1, H2, H3, H4, H5, H6 {text-align: center}

does exactly the same thing as:

H1 {text-align: center}

H2 {text-align: center}

H3 {text-align: center}

H4 {text-align: center}

H5 {text-align: center}

H6 {text-align: center}

Both styles tell the browser to center the contents of the header tag levels 1-6. Clearly, the first version is easier to type, understand, and modify. And it takes less time and fewer resources to transmit across a network, as well.

9.2.3 Contextual Selectors

Normally, the styles-conscious browser applies styles to the tags wherever they appear in your document, without regard to context. However, the CSS standard does define a way to have a style applied only when a tag occurs within a certain context within a document, such as when it is nested within other tags.

To create a contextual selector, list the tags in the order in which they should be nested in your document, outermost tag first. When that nesting order is encountered by the browser, the style properties will be applied to the last tag in the list.

For example, here's how you might use contextual styles to define the classic numbering sequence used for outlines: capital letters for the outer level, uppercase Roman numerals for the next level, lowercase letters for the next, and Arabic numerals for the innermost level: OL LI {list-style: upper-alpha}

OL OL LI {list-style: upper-roman}

OL OL OL LI {list-style: lower-alpha}

OL OL OL OL LI {list-style: decimal}

According to the example style sheet, when the styles-conscious browser encounters the <li> tag nested within one <ol> tag, it uses the upper-alpha value for the list-style property of the <li> tag. When it sees an <li> tag nested within two <ol> tags, the same browser will use the upper-roman list-style.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.