9780321193124

The definitive guide to Cascading Style Sheets version 2.1 - from the creators of the technology.

Hakon Wium Lie is a product of the MIT Media Lab's Electronic Publishing Group, who joined the WWW project at CERN Physics Laboratory in Geneva in the early days of the Web. He first proposed the concept of Cascading Style Sheets in 1994 and is now responsible for Style Sheets within W3C. When not working on how to beautify web pages, he paints 'Rothko'-like paintings and collects bits and pieces for his soon to be built, computer controlled pipe organ. Bert Bos completed his Ph.D. in Groningen, The Netherlands, on a prototyping language for graphical user interfaces. He developed browser software and support for humanities scholars and then joined the W3C at INRIA/Sophia-Antipolis in 1995. He started, and for three years led, W3C's work on internationalization, and now coordinates the development of new versions of XML. He continues his work on Style Sheets.

Foreword 2005

v

Foreword 1999

vii

Preface

xviii

Chapter 1 The Web and HTML

1

(32)

The Web

3

(1)

Development of the Web

3

(1)

Markup Languages

4

(1)

Dodging the Limitations of HTML

5

(5)

Proprietary HTML extensions

6

(1)

Converting text into images

7

(1)

Placing text in a table

8

(1)

Writing a program instead of using HTML

9

(1)

HTML Basics

10

(23)

Elements

10

(1)

Building a simple HTML document

11

(4)

Block-level and inline elements

15

(1)

Element overview

16

(1)

Comments

17

(1)

Lists

18

(3)

Empty elements HR and BR

21

(1)

Maintaining pre formatted text

22

(2)

Adding hyperlinks

24

(2)

Adding images

26

(1)

Document Trees

27

(6)

Nested elements

29

(4)

Chapter 2 CSS

33

(21)

Rules and Style Sheets

33

(4)

Anatomy of a rule

34

(1)

Anatomy of a declaration

34

(1)

Grouping selectors and rules

35

(2)

"Gluing" Style Sheets to the Document

37

(2)

Gluing by using the STYLE element

37

(2)

Browsers and CSS

39

(2)

Tree structures and inheritance

41

(1)

Overriding Inheritance

42

(2)

Properties that don't inherit

44

(8)

Common tasks with CSS

45

(1)

Common tasks: fonts

45

(2)

Common tasks: margins

47

(4)

Common tasks: links

51

(1)

A word about cascading

52

(2)

Chapter 3 The amazing em unit and other best practices

54

(7)

Chapter 4 CSS selectors

61

(28)

Selector Schemes

61

(1)

Type Selectors

62

(1)

Simple attribute selectors

63

(4)

The CLASS attribute

63

(3)

The ID attribute

66

(1)

The STYLE Attribute

67

(2)

Combining Selector Types

69

(1)

Simple contextual selectors

70

(1)

External information: pseudo-classes and pseudo-elements

71

(4)

The anchor pseudo-classes

72

(1)

The first-letter and first-line pseudo-elements

73

(2)

DIV and SPAN

75

(2)

Advanced attribute selectors

77

(5)

Selecting on the presence of an attribute

77

(1)

Selecting on the value of an attribute

78

(1)

Selecting on a single word in the value of an attribute

78

(1)

Selecting on the language of an element

79

(3)

Advanced contextual selectors

82

(1)

The child selector

82

(1)

The sibling selector

83

(1)

Advanced pseudo-classes

83

(3)

User-interaction: the active, hover, and focus pseudo-classes

83

(2)

Counting elements: the first-child pseudo-class

85

(1)

Advanced pseudo-elements

86

(1)

The "any" selector

86

(3)

Chapter 5 Fonts

89

(33)

Typesetting terminology

90

(1)

Classifying font families

91

(3)

Serif or sans serif?

92

(1)

Proportional-spaced or monospaced?

92

(1)

Does it resemble handwriting?

93

(1)

Is it mainly for decorative purposes?

93

(1)

The font-family property

94

(4)

Design tips using font families

97

(1)

Font metrics

98

(2)

Length units

100

(3)

Absolute units

101

(1)

Relative units

101

(1)

The pixel unit

102

(1)

Percentages as values

103

(1)

Keywords as values

104

(1)

The font-size property

104

(3)

The "length" value

104

(1)

The "percentage" value

105

(1)

The "absolute-size" value

106

(1)

The "relative-size" value

106

(1)

The font-style property

107

(2)

The font-variant property

109

(1)

The font-weight property

110

(3)

The font property

113

(2)

The text-decoration property

115

(2)

The text-transform property

117

(3)

The direction and unicode-bidi properties

120

(1)

More information about fonts

121

(1)

Chapter 6 The fundamental objects

122

(26)

The box model

123

(1)

The display property

124

(3)

The "block" value

125

(1)

The "inline" value

125

(1)

The "list-item" value

126

(1)

The "none" value

126

(1)

The "run-in" value

126

(1)

The "inline-block" value

127

(1)

Using the display property

127

(2)

More about lists - the list-style properties

129

(1)

The list-style-type property

129

(2)

The list-style-image property

131

(1)

The list-style-position property

132

(1)

The list-style property

132

(2)

Generated text, counters, and quotes

134

(9)

The :before and :after pseudo-elements and the content property

135

(2)

Generating quote marks

137

(3)

Counters

140

(2)

Styles for counters

142

(1)

Self-nesting counters

142

(1)

The white-space property

143

(5)

Chapter 7 Space inside boxes

148

(22)

Space inside block-level elements

149

(1)

The text-align property

150

(1)

Right aligning text

151

(1)

justifying text

152

(1)

The text-indent property

153

(1)

Using the text-indent property

154

(2)

The line-height property

156

(3)

Using the line-height property

159

(1)

The word-spacing property

160

(1)

Using the word-spacing property

161

(1)

The letter-spacing property

162

(1)

Using the letter-spacing property

163

(2)

The vertical-align property

165

(3)

The "top" and "bottom" keywords

166

(1)

The value as a percentage or length

167

(1)

The cursor property

168

(2)

Chapter 8 Space around boxes

170

(35)

Margins and the margin properties

171

(2)

Using the margin property

173

(1)

Common uses of the margin properties

173

(2)

The padding properties

175

(2)

Using the padding property

177

(1)

The border properties group

178

(1)

The border-color properties

179

(2)

The border-style properties

181

(2)

The border-width properties

183

(2)

Using the border-width property

185

(1)

The border properties

185

(1)

Using the border property

186

(2)

Working with the border properties

188

(1)

Outline borders

188

(2)

Collapsing margins

190

(2)

The width property

192

(1)

The height property

192

(1)

The float property

193

(2)

The clear property

195

(2)

Minimum and maximum widths and heights

197

(1)

The whole story on width computation

198

(3)

Case 1: no value is "auto"

201

(1)

Case 2: one value is "auto"

201

(1)

Case 3: two or three of the three values are "auto"

201

(2)

The overflow property

203

(2)

Chapter 9 Relative and absolute positioning

205

(17)

The position property

206

(1)

The containing block

207

(3)

Relative positioning

210

(1)

Fixed positioning

211

(2)

Absolute positioning

213

(3)

Using auto values

214

(2)

The z-index property

216

(1)

Making elements invisible

217

(1)

Clipping elements

218

(1)

An example

218

(4)

Chapter 10 Colors

222

(20)

Specifying colors

223

(4)

Color names

224

(1)

RGB colors

224

(2)

System colors

226

(1)

The properties

227

(1)

The color property

227

(1)

Setting the color of a border

228

(1)

Setting the color of hyperlinks

228

(1)

The background properties

229

(1)

The background-color property

229

(3)

Background color in inline elements

230

(1)

Background color in block elements

231

(1)

Background color in list items

231

(1)

The transparent value

231

(1)

The background-image property

232

(1)

The background-repeat property

233

(2)

The background-attachment property

235

(2)

The background-position property

237

(2)

Placing images using percentages

237

(1)

Placing images using absolute positions

238

(1)

Placing images using keywords

238

(1)

The background property

239

(2)

Setting the background of the canvas

241

(1)

Chapter 11 From HTML extensions to CSS

242

(24)

Case 1: Magnet

242

(3)

Case 2: Cyberspazio

245

(4)

Colors

245

(2)

Images

247

(1)

Fonts

247

(1)

White space

248

(1)

Case 3: "The form of the book"

249

(3)

Case 4: "The new typography"

252

(2)

Case 5: TSDesign

254

(6)

Case 6: CSS Zen Garden

260

(6)

Chapter 12 Printing and other media

266

(15)

Page breaks

267

(5)

Use of page break properties

271

(1)

Page areas

272

(3)

Page selectors and margins

272

(1)

Left and right pages

273

(1)

First pages

274

(1)

Units for page margins

275

(1)

Media-specific style sheets

275

(6)

Media types

277

(4)

Chapter 13 Cascading and inheritance

281

(12)

Example 1: The Basics

283

(2)

Example 2: conflicts appear

285

(1)

Example 3: accommodating user styles

286

(2)

Example 4: a more complex example

288

(4)

Step 1: Find all rules that apply

289

(1)

Step 2: Sort the rules by explicit weight

290

(1)

Step 3: Sort by origin

290

(1)

Step 4: Sort by specificity

291

(1)

Step 5: Sort by order specified

291

(1)

The "inherit" keyword

292

(1)

Chapter 14 External style sheets

293

(14)

Why external style sheets?

293

(1)

External HTML style sheets

294

(1)

Linking to style sheets

294

(5)

Persistent, preferred, and alternate author style sheets

296

(2)

The MEDIA attribute

298

(1)

@import

299

(2)

Using @import: a case study

299

(1)

@import: the details

300

(1)

External XML style sheets

301

(1)

W3C Core Styles

302

(5)

Chapter 15 Other approaches

307

(10)

Creating a document without using a style sheet

307

(6)

Using elements for layout

308

(3)

Using attributes for layout

311

(1)

The single-pixel GIF trick for controlling space

312

(1)

Using a different format from HTML

313

(2)

Portable Document Format

313

(1)

Images

314

(1)

Using XSL

315

(2)

Chapter 16 XML documents

317

(10)

XML in 10 points

317

(4)

1. XML is for structuring data

317

(1)

2. XML looks a bit like HTML

318

(1)

3. XML is text, but isn't meant to be read

318

(1)

4. XML is verbose by design

318

(1)

5. XML is a family of technologies

319

(1)

6. XML is new, but not that new

319

(1)

7. XML leads HTML to XHTML

319

(1)

8. XML is modular

320

(1)

9. XML is the basis for RDF and the Semantic Web

320

(1)

10. XML is license-free, platform-independent, and well-supported

321

(1)

XML and CSS

321

(1)

Experimenting with XML

322

(1)

Some examples

323

(4)

Chapter 17 Tables

327

(18)

The parts of a table

327

(2)

Collapsing borders model

329

(3)

Separated borders model

332

(2)

Borders for empty cells

334

(1)

Alignment

334

(1)

Sizes

335

(4)

Fast size

337

(2)

Setting background colors

339

(1)

Positioning the caption

340

(1)

Inline tables

340

(1)

XML and tables

341

(4)

Chapter 18 The CSS saga

345

(9)

Browsers

349

(3)

Beyond browsers

352

(2)

Appendix A HTML 4.0 quick reference

354

(15)

Document structure

354

(1)

The HEAD element

355

(1)

The BODY element

356

(4)

Container elements

357

(1)

Bridge elements

357

(1)

Special elements

358

(2)

Text-level elements

360

(4)

Restricted text-level elements

362

(2)

BUTTON: a text-level container element

364

(1)

Special characters

364

(2)

XHTML I

366

(3)

Appendix B Reading property value definitions

369

(7)

Multiple values

371

(3)

Tying it all together

374

(2)

Appendix C System colors

376

What is included with this book?

The New copy of this book will include any supplemental materials advertised. Please check the title of the book to determine if it should include any access cards, study guides, lab manuals, CDs, etc.

The Used, Rental and eBook copies of this book are not guaranteed to include any supplemental materials. Typically, only the book itself is included. This is true even if the title states it includes any access cards, study guides, lab manuals, CDs, etc.

Cascading Style Sheets, Third Edition, Designing for the Web Since its introduction in 1996, Cascading Style Sheets (CSS) has revolutionized web page design. Now, in 2004, most web pages use CSS, and many designers base their layouts entirely on CSS. To do so successfully requires a good understanding of how CSS works. The purpose of this book is to describe how designers can take full advantage of CSS 2.1, which is the newly released update of the specification. CSS's journey from an idea to a specification-and then on to a specification designers can rely on-has been long and arderous. The creator of the CSS Zen Garden (described in Chapter 12, "From HTML extenstions to CSS") describes it this way: Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support. Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser 1 creators. Indeed, we believe the web is a more enlightened place now that CSS have matured to a stage where it can be used for advanced layouts in a range of browsers. This book will tell you all you need to know to start using CSS. Copyright Pearson Education. All rights reserved.

Amazon no longer offers textbook rentals. We do!

Cascading Style Sheets : Designing for the Web

Cascading Style Sheets : Designing for the Web

0321193121

Summary

Author Biography

Table of Contents

Supplemental Materials

Excerpts