Cascading Style Sheets 2.0 Programmer's Reference

by Eric Meyer

Overview

Publisher's Note: Products purchased from Third Party sellers are not guaranteed by the publisher for quality, authenticity, or access to any online entitlements included with the product.

This handy resource gives you programming essentials at your fingertips, including all the new tags and features in CSS 2.0


The most authoritative quick reference available for CSS programmers. This handy resource gives you programming essentials at your fingertips, including all the new tags and features in CSS 2.0. You'll get concise information on designing and deploying complex style sheets as well as details on browser support.

Product Details

ISBN-13:	9780072131789
Publisher:	McGraw Hill LLC
Publication date:	03/20/2001
Series:	Programmer's Reference Series
Edition description:	Subsequent
Pages:	368
Product dimensions:	5.40(w) x 8.30(h) x 0.89(d)

About the Author

Eric A. Meyer (Cleveland, OH) has been working with the Web since late 1993. He is currently the Internet Applications Manager for the OPAL Group, an information technology firm in Cleveland, Ohio. Eric is an Invited Expert and member of the W3C CSS&FP Working Group, and he is responsiblr for coordinating the creation of the W3C's CSS Test Suite. Eric continues to remain active on CSS newsgroups and edits Web Review's Style Sheets Reference

Read an Excerpt

Chapter 2: Values

Although authors tend to focus on the properties in CSS, nothing in CSS would work without the values that are assigned to those properties. After all, you can't describe the left border of an element without being able to say what it looks like, and that's what values do. In many cases, a property will use its own uniquely defined keywords (e.g., underline or thin). However, there are also many cases where generic types of values can be used. These generic value types are explained in this chapter.

The property reference chapters (4 through 6) use roughly the same value syntax as that described in section 1.3.2 of the CSS2 specification. In particular, the same symbolic conventions are used to indicate alternatives and optional keywords. The grouping symbols are as follows:

• A vertical bar ( I ) is used to separate two or more alternatives when any one, but only one, of them may be used.
• A double vertical bar (I I) is used to separate two or more alternatives when any of them may be used in any order. This operator is stronger than the single vertical bar.
• A sequence of several words means that all of them must occur in the order shown. 2A sequence is stronger than the double vertical bar.
• Square brackets ( [ 1) are used to group values together.

Thus, the following two expressions are equivalent: In addition to the grouping symbols, there are also modifier symbols. Any keyword, value type, or group can be modified using the following symbols.

An asterisk (*) indicates that the preceding value or group may occur zero or more times, with no defined upper limit.

A plus sign (+) indicates that the preceding value or group must occur one or more times, with no defined upper limit.

A question mark (?) indicates that the preceding value or group is optional. • A pair of two comma-separated numbers in curly braces x, Y )) indicates that the preceding value or group occurs a minimum of X times and a maximum of Y times. For example, to test { 2 , 5 ) means that the word t test must appear anywhere from two to five times.

Any symbols besides the ones defined here must appear literally. Two such examples are the comma (,) and slash (/) symbols.

The most important thing to keep in mind with values is that, when they use a unit, there is no space between the value and its unit. For example, a distance of four inches is written 4in. Any space between the value and its associated unit (as in 4 in) will cause browsers to ignore the declaration at best, and drastically misinterpret it at worst. This is one of the most common mistakes CSS authors make.

It is also the case that values are never quoted (except for string values and some font names). Thus, the keyword value for the color blue should not be written ^ blue ° . Instead, it should be blue. This is possibly the second most common mistake committed by CSS authors.

Color Values

Color values are used to specify a color (go figure). Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element...

Table of Contents

	Introduction	xv
I	Reference
1	Basic CSS Concepts	3
	Associating Styles with Documents	3
	Link Element	3
	Style Element	4
	Style Attribute	5
	@import Rule	6
	Rule Structure	6
	Resolving Style Conflicts	7
	Cascade Rules	8
	Specificity Calculation	9
	Importance	10
	Inheritance	10
	Shorthand Properties	11
	Visual Layout	13
	The Box Model	13
	The Inline Layout Model	15
	Float Rules	18
	Positioning Rules	20
	Relative Positioning	20
	Absolute Positioning	21
	Font Rules	26
	Font Family Matching	26
	Font Face Matching	28
	Font Weight Matching	28
2	Values	31
	Value Representations	31
	Basic Rules	32
	Value Reference	32
	Color Values	32
	Length Values	34
	Angle Values	37
	Time Values	38
	Frequency Values	39
	Strings	39
	Percentages	40
	URI Values	41
3	Selectors, Pseudo-Classes, Pseudo-Elements, and At-Rules	43
	Selectors	43
	Type Selector	43
	Descendant Selector	44
	Universal Selector	44
	Child Selector	45
	Adjacent-Sibling Selector	45
	Attribute Selectors	46
	Class Selectors	48
	ID selectors	49
	Pseudo-Classes	49
	:first-child	50
	:link	51
	:visited	51
	:hover	52
	:active	53
	:focus	53
	:lang(n)	54
	:left, :right, and :first	55
	Pseudo-Elements	55
	:first-letter	55
	:first-line	56
	:before	57
	:after	58
	At-Rules	59
	@import	59
	@media	61
	@charset	61
	@font-face	62
	@page	63
4	Visual Media Styles	65
	Reference	65
	background	65
	background-attachment	67
	background-color	69
	background-image	70
	background-position	72
	background-repeat	75
	border	76
	border-bottom	78
	border-bottom-color	79
	border-bottom-style	80
	border-bottom-width	81
	border-collapse	82
	border-color	84
	border-left	85
	border-left-color	86
	border-left-style	87
	border-left-width	88
	border-right	89
	border-right-color	90
	border-right-style	91
	border-right-width	92
	border-spacing	93
	border-style	94
	border-top	97
	border-top-color	98
	border-top-style	99
	border-top-width	100
	border-width	101
	bottom	103
	caption-side	105
	clear	106
	clip	108
	color	109
	content	111
	counter-increment	113
	counter-reset	115
	cursor	116
	direction	119
	display	120
	empty-cells	124
	float	125
	font	127
	font-family	130
	font-size	132
	font-size-adjust	135
	font-stretch	137
	font-style	139
	font-variant	141
	font-weight	142
	height	145
	left	146
	letter-spacing	148
	line-height	149
	list-style	151
	list-style-image	153
	list-style-position	154
	list-style-type	155
	margin	158
	margin-bottom	160
	margin-left	161
	margin-right	162
	margin-top	164
	marker-offset	165
	max-height	166
	max-width	168
	min-height	169
	min-width	170
	outline	171
	outline-color	172
	outline-style	173
	outline-width	175
	overflow	176
	padding	178
	padding-bottom	179
	padding-left	180
	padding-right	182
	padding-top	183
	position	184
	quotes	186
	right	187
	table-layout	189
	text-align	191
	text-decoration	193
	text-indent	195
	text-shadow	196
	text-transform	198
	top	199
	unicode-bidi	201
	vertical-align	202
	visibility	205
	white-space	206
	width	207
	word-spacing	208
	z-index	210
5	Paged Media Styles	213
	General Paged-Media Rules	214
	Page-Breaking Rules	214
	Content-Clipping Rules	216
	Reference	216
	@page	216
	first	218
	left	219
	right	219
	marks	220
	orphans	221
	page	222
	page-break-after	224
	page-break-before	225
	page-break-inside	226
	size	227
	widows	229
6	Aural Media Styles	231
	Reference	231
	azimuth	231
	cue	234
	cue-after	235
	cue-before	236
	elevation	237
	pause	238
	pause-after	239
	pause-before	240
	pitch	241
	pitch-range	243
	play-during	244
	richness	246
	speak	247
	speak-header	248
	speak-numeral	249
	speak-punctuation	250
	speech-rate	251
	stress	253
	voice-family	254
	volume	255
II	Summaries
7	Broser Compatibility	261
	Notes	279
1.1	Containment in HTML	279
1.1	Containment in HTML	279
1.3	Inheritance	279
1.4	Class Selector	279
1.5	ID Selector	279
1.6	Contextual Selectors	280
3.2	Cascading Order	280
5.2.2	font-family	280
5.2.4	font-variant	280
5.2.6	font-size	280
5.3.2	background-color	281
5.3.2	background-color	281
5.3.4	background-repeat	281
5.3.4	background-repeat	281
5.3.4	background-repeat	282
5.3.7	background	282
5.4.3	text-decoration	282
5.4.3	text-decoration	283
5.4.5	text-transform	283
5.4.6	text-align	283
5.4.8	line-height	283
5.4.8	line-height	283
5.5.01	margin-top	283
5.5.02	margin-right	284
5.5.03	margin-bottom	284
5.5.04	margin-left	284
5.5.05	margin	284
5.5.06	padding-top	284
5.5.07	padding-right	285
5.5.08	padding-bottom	285
5.5.09	padding-left	285
5.5.10	padding	285
5.5.11	border-top-width	285
5.5.12	border-right-width	285
5.5.13	border-bottom-width	285
5.5.14	border-left-width	286
5.5.15	border-width	286
5.5.16	border-color	286
5.5.17	border-style	286
5.5.18	border-top	286
5.5.19	border-right	286
5.5.20	border-bottom	287
5.5.21	border-left	287
5.5.22	border	287
5.5.23	width	287
5.5.25	float	287
5.5.26	clear	288
5.6.1	display	288
5.6.3	list-style-type	288
5.6.5	list-style-position	288
6.1	Length Units	289
6.3	Color Units	289
6.4	URLs	289
8	CSS2 Quick Reference	291
9	Useful Resources	313
	Tools	313
	CSScheck (Web Design Group)	313
	CSS Validator (World Wide Web Conortium)	313
	Discussion Groups	314
	Stylesheets Newsgroup (Usenet)	314
	Style Discussion List (W3C)	314
	Style Discussion List (HTML Writers Guild)	314
	References	315
	CSS Activity Page (W3C)	315
	Style Sheets Reference Guide (Web Review)	315
	The House of Style (Western Civilisation)	315
	Agitprop	316
	CSS Pointers Group	316
	Index	317