Friday 29th of August 2014 05:12:12 AM

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.

Correctly implemented user agents will collapse the vertically adjacent margins, as shown in the first list in Figure 7-16, where there are 15-pixel spaces between each list item. The second list shows what would happen if the user agent didn't collapse margins, resulting in 25-pixel spaces between list items.

Another word to use, if you don't like "collapse," is "overlap." Although the margins are not really overlapping, you can visualize what's happening using

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.




CSS2, it is possible to set up a situation where scrollbars would be applied to an element such as a paragraph.

It's also possible to set the top and bottom margins of a block-level element to be auto. If either of these properties is set to auto, it is reset to 0 (zero), effectively removing any top or bottom margin from the element box, as shown in Figure 8-5. The lack of any space between the borders of each paragraph is a result of auto being calculate the width, or the height, or both.

9.1.3.1. Setting width and height

If you want to give your positioned element a specific width, then the obvious property to turn to is width. Similarly, height will let you declare a specific height for a positioned element.

Incidentally, the result, shown in Figure 6-37,would have been exactly the same had the position been declared asright top. When using theposition keywords, they can appear in any order, so long as there areno more than two of them, one for the horizontal and the other forthe vertical.

Figure 6-37

Figure 6-37. Placing the background image in the top right corner of the browser window

If only one keyword appears, then the other is assumed to becenter. Table 6-1 shows

3.1. Colors

Of course, the one thing that almost every beginning web author wants to know is, "How do I set colors on my web page?" Under HTML, there were two choices: use one of a small number of colors with names, like red or purple, or employ a vaguely cryptic method using hexadecimal codes. Well, both of those methods for describing colors can be found in CSS, as