Within the Cascading Style Sheet standard, the
text-align property controls are easy to use. Unlike plain
HTML, where the align
attribute can only be used with certain tags, the text-align
property can be applied to any HTML element. This gives you control of
text alignment anywhere in your document without adding lots of extra <P>
or <DIV> tags
just to change text alignment.
The easiest way to manage text alignment in your document
is to create a class for each type that you can later apply to document
elements as needed:
.flush-left {text-align: left;}
.flush-right {text-align: right;}
.centered {text-align: center;}
.justified {text-align: justify;}
When you need an element to be right-aligned, for example,
you can just add CLASS="flush-right"
to the tag for the desired effect.
Marginal
style
Margins are not the easiest thing in HTML. You can get
adequate results from the <BLOCKQUOTE>
tag, or get better control from a three-column table. Either solution is
hardly a great example of web design.
CSS, on the other hand, provides excellent support for
margins, with no fewer than five properties governing the margin around
any object in your document. Four of these control individual margins at
the top, bottom, left, and right sides of an object, and the fifth makes
it easy to set any or all margins with a single composite style property.
Before you try these properties, you need to understand
two quirk regarding the HTML margin. First, every element within a
document has a margin on each side, and those margins can be different
sizes. When two elements are next to each other horizontally, their
margins combine to create space between them, equal to the sum of the
margins. When two elements are adjacent vertically, their margins collapse
to create a margin that is the greater of the two. If the first paragraph
has a bottom margin of 0.5 inches and the next paragraph has a top margin
of 0.75 inches, the space between the two paragraphs will be 0.75 inches,
the greater of the two margins.
The second quirk of margins is that nested elements may
have their margins stretched to match the size of the containing element.
In general, you will not encounter this problem unless you are changing
both the margin and the width of an element contained within another
element. If you stick to plain margin control, things should work out as
you anticipated.
Now, on to the properties...
The specific margin properties are margin-left,
margin-right, margin-top,
and margin-bottom. You
can set these margins to a specific amount, or you can use a percentage
value. Percentage margins create a margin that is the desired percentage
of the containing element's width. For example:
.sample {margin-left: 75pt; margin-right: 25pt;}
creates left and right margins that match the table-based
margin. Since these margins might be too big or small depending on the
size of the containing flow, you might be better off with:
.percent {margin-left: 10%; margin-right: 5%;}
This will create a margin that works well regardless of
the width of the text flow.
Shorthand
margins
When you need to specify all four margins for an element,
using all four margin properties can get tedious. For these cases, you can
use the margin
property instead.
This property accepts from one to four values that are
used to set the four margins around an element. How these values are used
depends on the number specified, as shown in this table:
| margin: 1 |
1 |
1 |
1 |
1 |
| margin: ab |
b |
b |
a |
a |
| margin: a b c |
b |
b |
a |
c |
| margin: a b c d |
d |
b |
a |
c |
This is easier than it looks. To get half-inch margins all
around something, use margin: 0.5i.
To get one-inch margins left and right, with half-inch margins above and
below, use margin:
0.5i 1.0i.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index
4: All About Text & Style Sheets, CSS