Monday 24th of November 2014 08:46:58 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.

Before we get there, however, there are a few more things to cover. Remember that absolutely positioned boxes can have backgrounds, margins, borders, and padding; styles can be applied within them, just as with any other element. This can make them very useful for the creation of sidebars, "sticky notes," and other such effects. One example is the ability to set a "change marker" on any paragraph that has been edited. This could be done using the following styles and markup:

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.

translated as "make sure that the left side of anH2 is clear of floating images" and is areplacement for the HTML construct<BRclear="left">. Figure 7-74shows the following declaration, which uses clearto prevent H2 elements from flowing past floatedelements to the left side:

H2 {clear: left;}
B elements. Similar problems can arise when using STRONG, or any other element that would ordinarily call for boldface text.

The solution is simple enough. Just make sure that you set an explicit font-weight for these elements. A good rule to include in your style sheet would be:

STRONG, B {font-weight: bolder;}

This should overcome any reluctance on Navigator 4's part.

you wanted (for whatever reason) to clip the top 10 pixels of an image:

<IMG SRC="foo.gif" STYLE="clip: rect(10px, auto, auto, 0);">

The auto values will set the clipping rectangle's bottom to align with the bottom of the image, and the right edge to the right edge of the image. The value of 0 for left keeps the left edge of the clipping rectangle against the left edge of the image, but the 10px for top moves the top edge

Another important point is that when an element is positioned, itestablishes a containing block for its descendantelements. For example, we could absolutely position an element andthen absolutely position one of its children, as shown in Figure 9-23.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a childof A, which is in turn a child of a relatively positionedDIV. B was absolutely positioned, as was elementA, using styles like these: outset

There are nine distinct styles for the property border-style defined in CSS1, including the default value of none. They are demonstrated in Figure 7-29.

Figure 7-29

Figure 7-29. Border styles


The most interesting border style is double.