Table of Contents
Chapter 1: The Web and HTML
Dodging the Limitations of HTML
Chapter 2: CSS 30
Rules and Style Sheets
"Gluing" Style Sheets to the Document
Browsers and CSS
Tree structures and inheritance
Properties that don't inherit
Common tasks with CSS
A word about Cascading
Chapter 3: The Amazing EM Unit and Other Best Practices
Chapter 4: CSS Selectors
Simple attribute selectors
The STYLE Attribute
Combining Selector Types
Simple contextual selectors
External information: pseudo-classes and pseudo-elements
DIV and SPAN
Advanced attribute selectors
Advanced contextual selectors
The "any" selector
Chapter 5: Fonts
Classifying font families
The font-family property
Percentages as values
The font-size property
The font-style property
The font-variant property
The font-weight property
The font property
The font-stretch property
Numbers as values
The font-size adjust property
The text-decoration property
The text-transform property
More information about fonts
Chapter 6: WebFonts
Prerequisites for WebFonts
Basic font descriptors
The Unicode-range descriptor
Chapter 7: The Fundamental Objects
The box model
The display property
Achieving different effects
More about lists - the list-style properties
The list-style-type property
The list-style-image property
The list-style-position property
The list-style property
Generated text, counters and quotes
The white-space property
Chapter 8: Space Inside Boxes
Space inside Block-Level Elements
The text-align property
Right aligning text
The text-indent property
Using the text-indent property
The line-height property
Using the line-height property
The word-spacing property
Using word spacing
The letter-spacing property
The vertical-align property
Chapter 9: Space Around Boxes
Margins and the margin properties
Using the margin property
Common usages of the margin properties
The padding properties
The border properties group
The border-color properties
The border-style properties
The border-width properties
Using the border-width properties
The border properties
Using the border properties
Working with the border properties
The width property
The height property
The clear property
Minimum and maximum widths and heights
The whole story on width computation
Case 1: no value is "auto"
Case 2: one value is "auto"
Case 3: two or three of the three values are "auto"
Chapter 10: Relative and Absolute Positioning
The position property
The containing block
The z-index property
Making elements invisible
Chapter 11: Colors
Setting the color of a border
Setting the color of hyperlinks
The background properties
The background color property
The background image property
The background repeat property
The background attachment property
The background position property
The background property
Setting the background of the canvas
Chapter 12: Printing and Other Media
Media-specific style sheets
Chapter 13: Aural Style Sheets
Introduction to aural style sheets
Volume properties: volume
Speaking properties: speak
Pause properties: pause-before, pause-after, and pause
Cue properties: cue-before, cue-after, and cue
Mixing properties: play during
Spatial properties: azimuth and elevation
Voice characteristic properties: speech-rate, voice-family, pitch, pitch-range, stress, and richness
Speech properties: speak-punctuation and speak-numeral
Chapter 14: From HTML Extensions to CSS
Case 1: Magnet
Case 2: Cyberspazio
Case 3: "The form of the book"
Case 4: "The new typography"
Case 5: TSDesign
Chapter 15: Cascading and Inheritance
Example 1: The Basics
Example 2: conflicts appear
Example 3: accommodating user styles
Example 4: a more complex example
The "inherit" keyword
Chapter 16: External Style Sheets
Why external style sheets?
External HTML style sheets
Linking to style sheets
External XML style sheets
W3C Core styles
Chapter 17: Other Approaches
Creating a document without using a style sheet
Using a different format from HTML
Chapter 18: XML Documents
Experimenting with XML
Chapter 19: Tables
The parts of a table
The collapsing borders model
The separated borders model
Setting background colors
"Collapsing" columns and rows
XML and tables
Chapter 20: The CSS Saga
Appendix A: HTML 4.0 Quick Reference
The HEAD element
The BODY element
Appendix B: Reading Property Value Definitions
Tying it all together
Appendix C: System Colors:
Forewords & Introductions
When the Web was in its infancy, seven years ago or so, I felt greatly relieved at the final removal of all the totally unsolvable problems of fixed format presentation. In the young Web, there were no more pagination faults, no more footnotes, no silly word breaks, no fidgeting the text to gain that extra line that you sorely needed to fit everything on one page. In the window of a Web page on the NeXTStep system, the text was always clean. Better that that: I decided what font it came out in, how big I wanted the letters, what styles I chose for definition lists and where tabs went.
Then we descended into the Dark Ages for several years, because the Web exploded into a community that had not idea that such freedom was possible, but worried about putting on the remote screen exactly what they thought their information should look like. I've read recommendations against using structure markup because you have no control over what comes out the other side. Sad.
You have by now understood that I'm firmly in the camp of those who think that quality of content comes first, and presentation comes later. But of course, I'm not entirely right here: presentation is important. Mathematical formulas are always presented in a two-dimensional layout.
Fortunately, SGML's philosophy allows us to separate structure from presentation, and the Web DTD, HTML, is no exception. Even in the NeXTStep version of 1990, Tim Berneres-Lee provided for style sheets, though at a rudimentary level (we had other things to do then!)
Today, style sheets are becoming a reality again, this time much more elaborate. This is an important milestone for the Web, and we should stop for a minute to reflect on the potential benefits and pitfalls of the technology.
I followed the CSS effort from its inception - mostly over cups of coffee with Hakon at CERN - and I've always had one concern: is it possible to create powerful enough style sheet "language" without introducing the complexity of programming.
The CSS described in this book shows that you can create some quite stunning presentations without programming. While the programmer in me may be a little disappointed, the minimalist in me is comforted. In fact, I'll never need this much freedom and special effects, but then I'm not a graphic artist. Anything that needs more compilation effectively becomes an image, and should be treated as such. I feel therefore that the middle part of the spectrum between pure ASCII text and full images is effectively covered by the power of CSS, without introducing the complexity of programming.
You have here a book on presentation. But it is presentation of information that should also remain structured, so that your content can be effectively used by others, while retaining the specific visual aspects you want to give it. Use CSS with care. It is the long-awaited salt on the Web food: a little is necessary, too much is not good cooking.
The efforts of the authors have finally brought us what we sorely needed: the author's ability to shape the content without affecting the structure. This is good news for the Web!
Read an Excerpt
Chapter 1: The Web and HTML
Cascading Style Sheets, CSS for short, represents a major breakthrough in how Web page designers work by expanding their ability to control the appearance of Web pages - the documents that people publish on the Web.
Since the World Wide Web (the Web, for short) was created in 1990, people who wanted to put pages on the Web have had little control over what those pages would look like. In the beginning, authors could only specify structural aspects of their pages, for example, that some piece of text would be a heading or some other piece would be straight text. Also, there were ways to make text bold or italic, among a few other effects, but that's where their control ended.
In the scientific environments where the Web was born, people are more concerned with the content of their documents than the presentation. In a research report, the choice of type faces (or fonts, as we call them in this book) is of little importance compared to the scientific results that are reported. However, when authors outside the scientific environments discovered the Web, the limitations of Web document formats became a source of continuing frustration. Authors often came from a paper-based publication environment where they had full control of the presentation. They wanted to be able to make text red or black, make it look more spacedout or more squeezed, to center it or put it against the right margin, or anywhere else they wanted. Many Web designers come from a desktop publishing background, in which they can do all of these things, and more, to improve the appearance of printed material. They want the same capabilities when they design Web pages. However, such capabilities have been slow to develop - slow by Internet speed standards, that is. So designers have devised techniques to sidestep these limitations, but these techniques sometimes have unfortunate side effects. We discuss those techniques and their side effects later in this chapter.
This book is about a new method for designing Web pages. CSS works with HTML (the HyperText Markup Language), which is the primary document format on the Web. HTML describes the document's structure; that is, the roles the various parts of a document play. For example, a piece of text may be designated as a heading or a paragraph. HTML doesn't pay much attention to the document's appearance, and in fact it has only very limited capability to influence appearance. CSS, however, describes how these elements are to be presented to the reader of the document. Now, using CSS, you can better specify the appearance of your HTML pages as well as make your pages available to more Web users worldwide. The release of CSS greatly enhances the potential of HTML and the Web.
A style sheet is a set of stylistic guidelines that tell a browser how an HTML document is to be presented to users. With CSS, you can specify such styles as the size, color, and spacing of text, as well as the placement of text and images on the page. Plus a whole lot more.
A key feature of CSS is that style sheets can cascade. That is, several different style sheets can be attached to a document and all of them can influence the presentation of the document. In this way, the author can create a style sheet to specify how the page should look, while the reader can attach a personal style sheet to adjust the appearance of the page for human or technological limitations, such as poor eyesight or a personal preference for a certain font.
CSS is a simple language that can be read by humans - in contrast to some computer languages. Perhaps even more important, however, is that CSS is easy to write. All you need to know is a little HTML as well as some basic desktop publishing terminology: CSS borrows from that terminology when expressing style. So those of you who have experience in desktop publishing should be able to grasp CSS very quickly. But if you're new to HTML, desktop publishing, and/or Web page design, don't despair. You are likely to find CSS surprisingly easy to grasp. The book includes a brief review of basic HTML as well as tips on page design.
To understand how revolutionary CSS is, you first need to understand Web page design as it has been and the problems that CSS can help solve. In this chapter, we begin with a brief tour of the Web and the problems Web designers and others have faced prior to the introduction of CSS. Then we quickly review the basics of HTML. For those of you who are already publishing on the Web, this all may be old news. For those of you who are new to the idea of designing Web pages, this should help put things in perspective. In Chapter 2, "Enter CSS," we step you through the basics of how to use CSS. In subsequent chapters, we delve more deeply into CSS, covering how you can specify the text, background, color, spacing, and more in the design of your Web pages.
The Web is a vast collection of documents on the Internet that are linked together via hyperlinks. The Internet consist of millions of computers worldwide that communicate electronically. A hyperlink is a predefined link between two documents. The hyperlinks allow a user to access documents on various Web servers without concern for where they are located. A Web server is a computer on the Internet that serves out Web pages on request. From a document on a Web server in California, the user is just one mouse click away from a document that is stored, perhaps, on a Web server in France. Hyperlinks are integral to the Web.Without them, there would be no Web.
Users gain access to the Web through a browser. A browser is a computer program that lets users browse, or "surf," the Web by fetching documents from Web servers and displaying them to the user. To move from one document to another, the user clicks on a highlighted (often underlined) word or image, that represents a hyperlink. The browser then retrieves the document that is at the other end of the hyperlink and displays it on the screen. For example, a user could be in a document about baroque music and click the highlighted words Johann Sebastian Bach which is linked to "Bach's home page" (on the Web, all celebrities - as well as everyone else who wants one - have a home page). When the browser has fetched Bach's home page (instantly in the best case) it will appear on the user's screen.
Development of the Web
The Web was invented around 1990 by Tim Berners-Lee with Robert Cailliau as a close ally. Both of them were then working at CERN, the European Laboratory for Particle Physics. Tim is a graduate of Oxford University and a long-time computer and software expert, and is now Director of the WorldWideWeb Consortium (W3C) an organization that coordinates the development of the Web. He also is a Principal Research Scientist at Massachusetts Institute of Technology's Laboratory for Computer Science (MIT LCS).And he's our boss. Robert is a 20-year veteran at CERN, where he still works. It was Robert who organized the first Web conference in...