Main?Margins
With margins, you can control the white space around an area. That area could be an image, a table, or even the body.
Margins are measured in lengths, or percentages.
If I wanted one (just one!) image in my document to have 20px of white space all around the edges, I would set up my CSS like this:
img.spec {
margin: 20px;
}
Then, I would set the class attribute in the image tag to "spec". Example; <img src="image.gif" class="spec" />. If I wanted all the images to have 20 pixels of white space, I could take out the .spec part in the CSS.
But, what if you wanted the top margin to be 10px, the bottom margin to be 40px, the left to be 90, and the right to be 20? Then you could type:
img {
margin-top: 10px;
margin-bottom: 40px;
margin-left: 90px;
margin-right: 20px;
}
Padding
The padding of an item is similar to margins, except padding effects how much the content of the item pushes in wards. It is the amount of space between the borders of the item, and the content within.
Padding is set up the same way margins are, only your replace "margin" with "padding". For example, I could set the padding on the left and right sides of the contents of a <td> tag with this:
td {
padding-left: 90px;
padding-right: 20px;
}
Borders
Borders can be placed around pretty much anything. You can place a border around an image, a body of text, or even a table. You can use CSS to specify the width, color, and even decoration of the border. You can also specify t o only put a border on the top of an element, or on whichever side(s) you want.
border-style
The border-style property can be set to: dotted, dashed, solid, double, groove, ridge, inset, or outset. If you wanted a table to have a blue, dotted border you would type:
table {
border-color: blue;
border-style: dotted;
}
You need to always specify a border style.
border-color
The border-color property can be set to whichever color you like. It can be a hex value, a name, or an RGB value.
Example:
font {
border-style: dotted;
border-color: #990000;
}
All content enclosed in the <font> and </font> tags will have a border colored #990000.
border-width
You can specify the width of a border like this:
table {
border-style: dotted;
border-width: 2px;
}
Or, you could specify the width of each individual border:
table {
border-style: dotted;
border-top-width: 2px;
border-right-width: 4px;
border-left-width: 5px;
border-bottom-width: 1px;
}
border
You can also be specific about what sides have borders, and what sides do not. If you only want a right border, and a top border with a solid, 2px, #99000 border you could type:
font {
border-top: solid #990000 1px;
border-right: solid #990000 1px;
}
Note that it is possible to string redundant pieces of information together like above. You could also type that like this:
font {
border-top: solid;
border-right: solid;
border-color: #990000;
border-width: 1px;
}
Float
When you set the float property to an element, text can flow freely around it. Float can have a value of right, or left, which places the element on the right or left of the screen, allowing text to flow freely around it.
Here is how you could set the float attribute to all your image tags:
img {
float: left;
}
Clear
If you only wanted a certain section of information to flow around an object, and another section to format as normal, you could use the clear property. This property can be set to left, right, both, or none.
For example, let's say I had a CSS document that looked like this:
img {
float: left;
}
.clear {
clear: left;
}
All the text could flow around the image, but if you wanted a certain section not to, you could just place <br class="left">, and text that comes after that will be under the image.
Clear can more or less be used to override float, and is best set to headers.
Display Properties
When you use the display property, you can determine how a tag is treated. The values are; block, inline, none, and list-item (list item only works on Netscape 4, or IE 5 for Mac).
block makes a tag have a line break after it, like the <p> tag.
inline makes a tag have no line break, like the <i> tag.
none Content enclosed will not even display. Great for hideing information that you do not want the browser to ignore, like counters.
list-item places list-item marker on the first line of text.
For example, let's say I wanted all my <b> tags to make a line break, but I wanted all my <p> not to, I'd type:
b {
display: block;
}
p {
display: inline;
}