Tuesday 07th of September 2010 11:33:04 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.




block-level element (either directly, or by implication, as with floated elements) is an inline element. Setting box properties for inline elements gets into even more interesting territory than we've already covered. Some good examples of inline elements are the EM tag and the A tag, both of which are nonreplaced elements, and images, which are replaced elements. background of an element. For this, you use the property background-color, which accepts (unsurprisingly) any valid color.

background-color

The background is the area of the content box and the padding and is always behind the foreground of the element. Therefore, the declared background color is applied to both the element's content box and its padding, as illustrated in Figure 6-14: different sizes. Thus you might see something like the following,shown in Figure 5-29:

H1 {font-variant: small-caps;}P {font-variant: normal;}<H1>The Uses of font-variant</H1><P>The property <CODE>font-variant</CODE> is very interesting...</P>
Figure 5-29

Figure 5-29. Small caps in use

specification says only that each number corresponds to a weight atleast as heavy as the number that precedes it. Thus,100, 200,300, and 400 might all map tothe same relatively lightweight variant, while 500and 600 could correspond to the same heavier fontvariant, and 700, 800, and900 could all produce the same very heavy fontvariant. As long as no keyword corresponds to a variant that islighter than the variant assigned to the previous keyword, then line in the element, if the situation seems to demand it. Forexample, a grooved border might look better enclosed on each lineend, as shown in
Figure 7-55.

Figure 7-55

Figure 7-55. An inline element with a border displayed across multiple lines of text, with the border boxes closed

It's also acceptable for the lines to be "open" asshown in Figure 7-54.

WARNING

Borders cannot be applied to inline elements in