Wednesday 07th of January 2009 02:22:19 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.

The question here, though, is what happens if the content of theelement doesn't all fit into the specified element size. Doesit get cut off at the boundaries, or does it spill outside thepositioned element? That's what the next section will explore.

9.1.4. Content Overflow and Clipping

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.




STRONG element into the Belement, it would come out like Figure 5-14:

<P>100 <SPAN> 400 <STRONG> 700 <B> 800 <STRONG> 900</STRONG></B></STRONG></SPAN>.</P>
Figure 5-14

Figure 5-14. Weight numbers, again

If there were yet another B element inserted intothe innermost STRONG element, its weight would

Since we've given the "tall" text a line-height of 18px , the difference between font-size and line-height is 6 pixels. In this case, though, the half-leading of 3 pixels is added to the content area, not subtracted (since the line-height is more than the font-size). This will result in an inline box 18 pixels tall, and its top is aligned with the top of the line box. Thus Figure 8-56. 

<P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE="font-size: 24px;">boldfaced</B> and which is<BR>larger than the surrounding text.</P>

What we have here is a situation where some of the text has afont-size of 12px , while othertext has a size of 24px . However, all of the texthas a line-height of 12px,

CSS defines a few steps to accommodate fewer than four values for margin:

The only drawback to this ability is a small one, but you're bound to run into it eventually. Suppose you want to set the top and left margins for H1 elements to be 10 pixels, and the bottom and right margins to be 20 pixels. In that case, you have to write the following: 

H1 {margin: 10px 20px 20px 10px;} /* can't be any shorter */
early days of style sheets, there were a number of proposals forstyling. One of these was JavaScript Style Sheets ( JSSS), aninteresting hybrid of early CSS and JavaScript. It probablywon't surprise you to learn that JSSS was promoted by Netscape.Although JSSS was never adopted, Navigator 4's rendering engineuses it, and so CSS doesn't work without JavaScript.

11.2.2. Hiding Styles with @import