1. You can use Cascading Style Sheets to specify the amount of margin for just one, two or three sides of the element. The properties are self-explanatory:

margin-top

margin-right

margin bottom

margin left

The values can be set to a certain length or a percentage of the element's length:

{p {margin-left: 5px;}

If you are going to set a value for each one of these sides, it's easier just to use the margin property.


2. One point you must keep in mind when using margins with Cascading Style Sheets is that when elements with top and bottom margins are together, their top and bottom margins are "collapsed." That means the actual margin between them will be the largest margin of one single element. It will not be the total.

For example, you have two headlines together and you've specified they have top and bottom margins of 10 pixels. The actual distance between them will not be displayed as the total of 20 pixels, but will be 10 pixels.

This happens only vertically or up and down -- not sideways. Also, collapsing applies only to margins, not to borders or padding.


3. In Cascading Style Sheets there is always a line between elements. It enclosed the element's actual content and its padding. (Margins are outside the border.) This line is often left with a border width of 0, making it invisible to web page viewers.

However, the border can be made as thick as you please. Also, it can be any color choose. And you can choose from the following styles: dotted, dashed, solid, double, groove, ridge, inset and outset.


4. You control your element borders in Cascading Style Sheets with the border properties of: border-style; border-width (which can be divided into border-top-width, border-right-width, border-bottom-width, border-left-width) and border-color.

You can combine all the border properties into one property of border:

h1 {border: thick black solid;}

This would create a thick, black solid line around major headlines.


5. With the Cascading Style Sheets box model, beyond the border is padding. Think of padding as the space around the box to protect it from the other elements. Just as you place padding around a real box to protect it.

If you want to specify the same amount of padding around the entire element, you can use the padding property. You can specify different amounts of padding for different sides by using the padding-top, padding-right, padding-bottom and padding-left properties. You will find yourself using padding options quite often to give items some space on the screen.

You can specify a set amount such as 5 pixels or a percentage of the element.

img {padding: 10px;}

6. You can use Cascading Style Sheets to "float" elements so that the rest of the page flows around it. This is normally used for images, but in CSS can also be used for text.

You can specify that an element float to the right or left. When you use the float property, margins are not collapsed.

To float images to the left of paragraphs, with a margin of 10 pixels:

p img {float: left; margin: 10px;}

7. You may often want to make certain that floating elements do not float next to or onto another element. You use the Cascading Style Sheets clear property to prohibit floating elements from being placed next to a property. Clear works by increasing the top margin of an element to whatever size is necessary to make sure it ends up below a floated element.

The possible values are: left, right, both and none

Use left when you're only concerned that a floating element is not displayed to the left of the element you're positioning. Right works the same way on the right side. If you want an element free of all floated objects, use both. None is the default and so is not useful.

To keep headings away from all floated objects (such as images):

h1 {clear: both;}

8. Cascading Style Sheets replaces the HTML methods for specifying the styles of list bullets. There are three list-style properties:

list-style-type
(Values = disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman)

list-style-image
(Values = url(filename.gif) )

list-item-position
(Values = inside and outside) -- bullets can be placed outside the list item, which is what you're used to seeing. Or inside the list item.

You can also combine this into one declaration with the list-style property. To make your bullets marked off by a small gif on the outside, with circles as a backup:

ul {list-style: url(filename.gif) circle outside;}

9. With Cascading Style Sheets you can use the HTML tag of <div> (short for "division") to create an area of the page with separate rules. For example, many pages will contain separate <div>s for the page's header, left and right column, center content and footer. You can position each <div> where you want. This helps in visualizing your design, since the HTML files simply lists everything from top to bottom.

You can make separate style rules for each <div>. For example:

div.header {color: red;}
div.main {color: black;}

The HTML will have:

<div class="header">header content (will appear red)</div>
<div class="main">main content (will appear black)</div>

10. With Cascading Style Sheets it's now possible to define how a visually impaired person using a voice-browser to surf the web will "hear" your site. You can define the voice-family property and the speed at which page is read with speech-rate property. You can also set the pitch, pitch-range, stress, richness and volume of the voice.

However, I strongly suspect that the visually-impaired web surfer would prefer to make these settings. Some may prefer women, some men, some fast-talk, some slow and so on.