Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 21st of August 2014 06:19:47 AM

Preface

The subject of this book is, as you might have guessed by the cover, Cascading Style Sheets (CSS). There are two "levels" to CSS; these are referred to as CSS1 and CSS2. The difference between the two is that CSS2 is all of CSS1, plus a lot more. This book attempts to cover all of CSS1, and CSS positioning, which is a part of CSS2. The rest of CSS2 is excluded because, at the time of this writing, nobody had implemented most of it. Rather than cover a lot of theoretical territory, we chose to stick to what was currently usable.

If you are a web designer or document author interested in sophisticated page styling, improved accessibility, and saving time and effort, then this book is for you. All you really need before starting the book is a decent knowledge of HTML 4.0. The better you know HTML, of course, the better prepared you'll be. You will need to know very little else in order to follow this book.

It is important to remember something about web standards and books: the former are continually evolving, while the latter are frozen in

BODY {background-image: url(bg23.gif);background-repeat: no-repeat;background-position: 20px 30px;}
Figure 6-43

Figure 6-43. Offsetting the background image using length measures

This is, of course, different than percentage values, in the sensethat the offset is simply from one top left corner to another. Inother words, the top left corner of the background image lines upwith the point specified in thebackground-position declaration. You can combinelength and percentage values, though, to get a sort of "best of time (until the next edition comes out, anyway). In the case of HTML and CSS, there are a great many changes afoot even as these words are being written. The recent formalization of XHTML 1.0 as a full W3C Recommendation, for example, is a major milestone in the evolution of the World Wide Web. There are likely to be even more levels to CSS, further extending the ability to style documents; major web browsers are approaching full CSS1 support, and robust CSS2 implementations can be seen lurking on the horizon. This is an exciting time to be a designer, and learning CSS now will give you a leg up on the future.

0.1. Typographical Conventions

The following typographical conventions are used in this book:

Constant width

is used to indicate code examples, HTML tags and CSS elements.

Constant width italic

is used for replaceables that appear in text.

Italic

is used to introduce new terms and to indicate URLs, filenames, and pathnames.

TIP

indicates a note or tip relating to the nearby text.

WARNING

indicates a warning.



Library Navigation Links

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

As a property, text-transform may not seem like itdoes very much. In fact, it's very useful if you suddenlydecide that you want all of your H1 elements to beall capitals. Instead of having to actually change the content of allyour H1 elements, you can just usetext-transform to make the change for you:

H1 {text-transform: uppercase;}<H1>This is an H1 element</H1>
background and then display it on Windows and Macintosh machines sideby side under identical lighting conditions, the background colorwould look different on each machine. This also crops up in graphicscreated for the Web, in that graphics created on Windows machinestend to appear darker to Macintosh users, whereas images created on aMacintosh look lighter for Windows users.

The situationdegrades even further when colors are printed, since factors asdiverse as the stock and color of the paper used, and even thetemperature of the printing mechanism, can affect how well colors arereproduced on paper.

In effect, this is yet another EM is not matched because its grandparent OL is not the direct child of a DIV.

Even better, you can string more than one child selector together to precisely target a given type of element. Take this, for example:

Figure 10-4

Figure 10-4. Selecting grandchildren only

The first list item in the source is silver because it's the child of an ordered list that is itself the child of a elements SUP and SUB (thesuperscript andsubscript elements) or used an imagewith markup along the lines of <IMGSRC="foo.gif"ALIGN="texttop">, then you've done somerudimentary vertical alignment. The CSS propertyvertical-align permits all of the alignment youused to do on inline elements, and more besides.

XML supports shareable structure (using DTDs)

Since the structure of the XML document can be specified in DTDs they provide a simple way to make it easier to exchange XML documents that conform to a DTD. For example, if two software systems need to exchange information, then if both of the systems conform to one DTD, the two systems can process information from each other. DTDs are not as powerful as some kind of schema architecture for XML, they don't support typing, subclassing, or instantiation mechanisms that a schema architecture must have.

DTDs are a simple way to make sure that 2 or more XML documents are of the same "type". Its a very limited approach to making "typed" XML documents shareable across systems. In the future some kind of schema system will be proposed by the W3C that should allow typing, instantiation and inheritance of information (in XML).

XML enables interoperability