Friday 21st of November 2008 06:40:32 PM
around absolute positioning. Since absolute positioning is the simplest scheme in which to demonstrate how top, right, bottom, and left work, we'll stick to that for now.

Figure 9-2

Figure 9-2. Positioning an element within its containing block

Note that the positioned element has padding, a double border, and a slightly different background color. In Figure 9-2, it has no margins, but if it did, they would create blank space

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.




H1 {font: 300% Helvetica,sans-serif; font-variant: small-caps;
letter-spacing: 0.75em; text-align: right; padding-right: 1em;
line-height: 1em;}
H1:first-letter {font-size: 200%; line-height: 1px; vertical-align: -100%;}

Consulting Figure 11-16, we see that it looks about right!

Figure 11-16

Figure 11-16. The final styled title

H1 {padding: 0 0 0 0.25in;}H2 {padding-left: 0.25in;}

7.5.3. Padding and Inline Elements

Thereis one major difference between margins and padding when it comes toinline elements. Let's turn things around and talk about leftand right padding first off. Here, if we set values for the left orright padding, they will be visible, as Figure 7-60INPUT elements could be set to yellow in order to highlight the currently active input: 

INPUT:focus {background: yellow;}

This style would only be applied to an element as long as it was in focus. As soon as the user switched from one input to another, the styles would be removed from the former and applied to the latter. This is a welcome capability, as it reduces the need for using JavaScript to create such effects.

textelement, realize that unless you declare awidth for that element, the CSSspecification says that its width will tend toward zero. Thus, afloated paragraph could literally be one character wide, assumingthat to be the browser's minimum value forwidth. In order to avoid this problem, make surethat you declare a width for your floated elements. Otherwise, youcould get something like Figure 7-66.

make paragraphs use an upright font, as usual, and cause theEM and I elements to use anitalic font -- again, as usual.

Figure 5-25

Figure 5-25. Ordinary document behavior through CSS

On the other hand, you might decide that there should be a subtledifference between EM and I:

P {font-style: normal;}EM {font-style: oblique;}