Sunday 26th of October 2014 06:54:06 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.

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.


Styles such as these comprise the bulk of any embedded stylesheet -- style rules both simple and complex, short and long. Itwill be only rarely that you have a document where theSTYLE element does not contain any rules.

For those of youconcerned about making your documents accessible to older browsers,border properties. Of course, it's possible to turn thecascade to your advantage:

H1 {border: thick silver solid;border-left-width: 20px;}

The second rule overrides the width value for the left borderassigned by the first rule, thus replacing thickwith 20px , as we see in Figure 7-50.

Figure 7-50

Figure 7-50. Using the cascade to one's advantage

Figure 5-11

Figure 5-11. Greater weight will usually confer visual boldness

Let's take this all one step further, and add two more rules,plus some markup, to illustrate how all this works (see Figure 5-12 for the results):

/*   assume only two faces for this example: 'Regular' and 'Bold'   */P {font-weight: 100;}   /* looks the same as 'normal' text */P SPAN {font-weight: 400;}   /* so does this */STRONG {font-weight: bolder;}   /* bolder than its parent */STRONG B {font-weight: bolder;}   /* bolder still */P {font-size: 18pt;}

When a number is used, the scaling factor is inherited instead of acomputed value. This factor is applied to the element and all of itschild elements, so that each element has aline-height calculated with respect to its ownfont-size, as demonstrated in Figure 4-25:

BODY {font-size: 10pt;}DIV {line-height: 1.5;}P {font-size: 18pt;}
Figure 7-81

Figure 7-81. Using images as bullets

Of course, you should exercise care in the images you use, as thisexample makes painfully clear (shown in Figure 7-82):

UL LI {list-style-image: url(big-ohio.gif);}
Figure 7-82

Figure 7-82. Using really big images as bullets

You should usually provide afallback for the bullet type. Do this justin case your image doesn't load, or gets corrupted, or is in aformat that some user agents might not be able to display (as is the