Friday 21st of November 2008 06:49:45 PM

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.


7.3.5. Collapsing Margins

There is one interesting aspect ofapplying margins to block-level elements: the collapsing of adjacentvertical margins. This comes into play when an element with marginsimmediately follows another such element in the document'slayout.



the border's width was set to be 20px , when the style is set to none, not only does the border's style go away, so does its width! Why?

If you'll remember, the terminology used in the previous section was that a border with a style of none does not exist. Those words were picked carefully because they help explain what's going on here. Since the border doesn't exist, it can't have any width, so the width is automatically set to 0 (zero). This may seem completely

8.4.2.1. Generating a line box

Here arethe steps a user agent has to go through in order to generate a linebox. First, for each inline nonreplaced element (or string of textoutside of an inline element), the font-size isused to determine the initial content-height.Thus, if an inline element has a font-size of seems simple.

Padding and borders are applied to replaced elements as normal;padding inserts space around the actual content (for example, agraphic) and the border surrounds the padding. What'sinteresting is that these two things actually do influence the heightof the line box. Consider Figure 8-66.

Figure 8-66

Figure 8-66. Adding padding and borders to an inline replaced element

Note that the "first" line box is tall enough to contain

<P STYLE="height: 10em;">

In this case, then the extra height is treated somewhat like extrapadding, as depicted in Figure 8-3.

Figure 8-3

Figure 8-3. Setting the height property for block-level elements

If, on the other hand, the height isless than that needed to display the content:

<P STYLE="height: 3em;">

then the browser is supposed to provide a way to see all content