Friday 21st of November 2008 07:58:30 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.


scroll, the element's content isclipped -- that is, cannot be seen -- but some way is providedto make the extra content available to the user. In a web browser,this would mean a scrollbar (or set of them) or another method ofaccessing the content without altering the shape of the elementitself. One possibility is depicted in Figure 9-9,which could result from the following styles:

DIV#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em;overflow: scroll;}



allowance, a user agent that is technically CSS1-compliant coulddisplay the following as all solid:

P.new3 {border-style: ridge dashed double;}

The result shown in Figure 7-35 wouldn't bewhat the author had in mind, of course, but it's technicallycorrect. So long as none andsolid are supported, and any other legal valuesare interpreted as solid, that's enough tobe CSS1-compliant. Accordingly, even though Navigator 4.x fails to

To avoid this sort of thing, and to make sure thatH2 elements do not coexist on a line with anyfloated elements, we use the value both. Thisvalue prevents coexistence with floated elements on both sides of theelement, as shown in Figure 7-76:

H2 {clear: both;}
Figure 7-76

Figure 7-76. Clear on both sides

If, on the other hand, we're only worried about H2 elements flowing past floated elements to their right, then we'd use H2 {clear: right;}, with the result shown in
Figure 7-77.
Figure 7-77

Figure 7-77. Clear to the right

influence the line-height at all. If we were toapply some borders to a SPAN element without anymargins or padding, we'd get results such as that shown in
Figure 8-57.

Figure 8-57

Figure 8-57. Inline borders and line-box layout

The borders are placed as they are because the border edge of inlineelements is controlled by the font-size, not theline-height. In other words, if aSPAN element has a font-size of