Tuesday 07th of February 2012 12:58:55 AM
as illustrated in Figure 7-6. (A background color has been added in order to be able to see the edges of the content area.) For example:

H1 {margin: 0.25in; background-color: silver;}
Figure 7-6

Figure 7-6. Setting a margin for H1 elements

This sets a quarter-inch of blank space on each side of an H1 element. In Figure 7-6, this is represented using dashed lines which are included for illustrative purposes. These lines would not actually appear in a web browser.

CSS Tutorials

CSS Tutorials

Welcome to the CSS Tutorials. In this section we cover Cascading Style Sheets, the powerful supplement to HTML that allows you complete control over the look of your websites. We'll show you how to create Cascading Style Sheets, and some of the cool tricks you can achieve with them.

For Beginners...

Introduction to CSS
This tutorial covers the basics: what are style sheets? How do I make a style sheet? It also shows some of the cool things you can do with style sheets.

CSS Units
A description of all the units that can be used with CSS, including lengths, percentages, colours and URL's.

For Intermediate Users...

Controlling Background Images and Colours
Learn how to use CSS properties to add background images and colour to your Web pages. Lots of neat tricks and examples are included!

Controlling Fonts with CSS
In this tutorial we take a look at how to control the fonts used in your page body text, using the various font properties that can be controlled with style sheets.

Controlling Text Appearance with CSS
This tutorial shows you how to control the layout of your text using the text properties available in CSS, such as line spacing and text alignment.

Making Lists Look Nicer with CSS
You can really go to town with HTML lists when you add a sprinkle of CSS! This tutorial shows you how to make your lists stand out from the crowd.

For Advanced Users...

CSS Positioning
This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.




The containing block is the context in which formatting takes place. For example, the containing block of a boldface element could be the paragraph in which it occurs, as demonstrated in Figure 9-1.

Figure 9-1

Figure 9-1. An example of a containing block

Not every element in CSS generates a containing block for its descendant elements. The rules for the establishment of a containing block are as follows:</P>

Figure 5-29

Figure 5-29. Small caps in use

As you may notice, in the display of the H1 element, there is a larger uppercase letter wherever an uppercase letter appears in the source and a small uppercase wherever there is a lowercase letter in the source. This may remind you rather strongly of text-transform: uppercase, with the only real difference that here, the uppercase letters are of different sizes. That's true, but the reason that small-caps is declared using a font property is XML documents are also naturally committed to a database (relational or object) or any other kind of XML document store. There are commercial products available which allow you to save XML documents to an XML storage layer (which is not a database per se), like Datachannel's XStore and ODI's eXcelon. These XML store solutions are quite expensive ($10,000 to $20,000 range).

XML documents are also quite naturally retrieved from a persistence layer (databases, file systems, XML stores). This lends XML to be used in real world applications where the information being used by different parts of a system is the most important thing.

XML is platform independent, textual information

Information in an XML document is stored in plain-text. This might seem like a restriction if were thinking of embedding binary information in an XML document. There are several advantages to keeping things plain text. First, it is easy to write parsers and all other XML enabling technology on different platforms. Second, it makes everything very interoperable by staying with the lowest common denominator approach. This is the whole reason the web is so successful despite all its flaws. By accepting and sending information in plain text format, programs running on disparate platforms can communicate with each other. This also makes it easy to integrate new programs on top of older ones (without rewriting the old programs), by simply making the interface between the new and old program use XML.

For example, if you have an address book document stored in an XML file, created on a Mac, that you would like to share with someone who has a PC, you can simply email them the plain text address book XML document. This cant be done with binary encoded information which is totally platform (and program) dependent.

second edition of this book will contain more practical advice, butat this time, the only practical advice we can give is this: testyour positioning code thoroughly, and be prepared for inconsistenciesbetween positioning implementations.

9.1. General Concepts

Before delving into the specific mechanisms of positioning, we needto establish a number of concepts. These concepts actually form thefoundation of CSS layout in general since every displayed element can