Wednesday 17th of September 2014 01:26:59 AM

CSS Tutorials

normal font face, but the value offont-weight is still 100. Thus,the SPAN text (which is set to bebolder) will inherit the value of100 and then evaluate to the next-heaviest face,which is the Bold face and which has a numerical weight of700. Figure 5-11 shows us thevisual result of all this.

Figure 5-11

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

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.




border-top: thick silver inset;border-bottom: double rgb(33%,33%,33%) 10px;}

Figure 7-46

Figure 7-46. Very complex borders

As you can see, the order of the actual values doesn't reallymatter. The following three rules will yield exactly the same border,as illustrated in Figure 7-47:

H1 {border-bottom: 3px solid gray;}H2 {border-bottom: solid gray 3px;}H3 {border-bottom: 3px gray solid;}

If we alter the SPAN styles to have a backgroundcolor, the actual placement of the line boxes becomes quite clear, aswe can see in Figure 8-47.

Figure 8-47

Figure 8-47. The full extent of each line box

Here we see that not every line reaches to the right edge of theparagraph's content area, which has been denoted with a dottedgray border. The end of each line box is determined by the content ofthe line box. For comparison, let's try the same thing, butthis time right-justify the paragraph, as shown in Figure 8-48.

With all of this shorthand stuff, you're probably starting to suspect that it goes even further, and you're right. We finally come to the shortest shorthand border property of all: border.

This property has the advantage of being very compact, although that brevity introduces a few limitations. Before we worry about that, let's see how border is used. If you want all H1 elements to have a thick, silver border, it's very simple. This declaration would be displayed as shown

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:

7.4.1.2. Falling back on solid

There is one interesting thing about CSS that can make life difficultfor authors. According to CSS1, a user agent is allowed to interpretany value of border-style (besidesnone) as solid. Because of thisallowance, a user agent that is technically CSS1-compliant coulddisplay the following as all solid: