| |
The properties, or attributes, of text may be organised using
'margin', 'text-align', 'text-indent', 'text-decoration' 'text-transform' and 'vertical-align'. Not all Browsers recognise 'white-space', 'word-spacing' and 'letter-spacing'
margin
Style sheets let us set a margin on any element. This margin is the space between the element, and the edge of the element which adjoins it. For headings and paragraphs, and other so called "block elements" this will usually be the body, but that isn't necessarily the case.
Margins can be applied to each edge individually, or to every edge at once.
You can specify the margin (which can be either positive or negative) in a number of units, or a percentage.
BODY {margin: 10%}
text-align
The text-align property is intended for use with block-level HTML elements: the document body, divisions, headings, paragraphs, etc. You cannot use it with textual level elements, like font styles, or non-text elements, like an image or a form element. <P style="text-align: right"> This is some text</p>
| Value |
Description |
Use
|
| left |
Text is left justified. |
P {text-align : left;}
|
| right |
Text is right justified. |
P {text-align : right;}
|
| center |
Text is centered within the element. |
P {text-align : center;}
|
| justify |
Text is left and right justified. |
P {text-align : justify;}
|
Vertical-align
The vertical-align property applies only to inline and table-cell elements, to change the vertical position of the element's text within the element itself. You can use one of the keywords described in this Table.
| Value |
Description |
| baseline |
Aligns the baseline of the element with the baseline of the parent |
| middle |
Aligns the middle of the element with the middle of the parent |
| sub |
Subscripts the element |
| super |
Superscripts the element |
| text-top |
Aligns the top of the element with the top of the parent element's text |
| text-bottom |
Aligns the bottom of the element with the bottom of the parent element's text |
| top |
Aligns the top of the element with the tallest element on the line |
| bottom |
Aligns the bottom of the element with the lowest element on the line |
text-indent
You may want the indent to scale with the font used in the paragraph, and
all is not lost in this case. For scalable indents, specify the amount of
the indent in ems. An em is an amount of space equal to the height
of the current font. If you want an indent equal to three times the font
height, you could say
.three { text-indent : 3em }
As the font grows and shrinks, so will the indent.
Exploiting margins
Conventional indented paragraphs, like this one, indent the first line to
the right while keeping the other lines flush to the left margin. The
opposite effect, wherein the first line shifts to the left, is known as a
"hanging indent" and can also be accomplished with the
text-indent property. As we'll see, you will need a little
help from the margin-left property to bring it all together.
To shift the first line to the left, use a negative indent amount. The
browser will dutifully move the first line. It will not, however, shift the
entire paragraph to the right to make room for that shifted first line.
Instead, it will just render that first line over whatever happened to be to
the left of the paragraph, which is probably not what you wanted.
To fix this, you must use the margin-left property to shift the
whole paragraph to the right while you use the text-indent
property to pull the first line to the left. Here are two kinds of hanging
indents:
.indent1 { text-indent : -3em; margin-left : 3em }
.indent2 { text-indent : -3em; margin-left : 6em }
The first hanging indent keeps the first line flush with the existing left
margin by setting the indent and margin amounts to the same value. The text
shifts right just enough to allow the first line to shift left.
The second hanging indent uses a margin larger than the indent amount, so
that the first line does not come all the way back to the left margin.
This creates an indented paragraph with a hanging indent, which is handy for
lists and other organized layouts in your documents.
Regardless of the kind of indent you choose to use, you'll find that
consistent use of the text-indent property will make your
documents far easier to maintain and consistently easier to read across
multiple browsers. Give up those indenting tricks and move up to the
text-indent property!
text-decoration
The text-decoration values you can assign to it are: normal, underline, overline, line-through, and blink. Here is the popular definition that rids all links of the underline beneath them:
A {text-decoration:none}
text-decoration:
underline, text-decoration: overline are only useful on <A>. Do not use on other elements (otherwise your site will look shoddy and unprofessional as a result of people clicking on the underlined text under the impression that
it was a link).
text-decoration:
line-through to emphasize price cuts or similar. This effect is also used by DEL - see the page on HTML tags.
text-transform
This property can transform text. The valid values are: none, capitalize, uppercase, lowercase.
<P><SPAN STYLE="text-transform: uppercase">The uppercase words,</SPAN> <SPAN STYLE="text-transform: capitalize">and the capitalised ones</SPAN>.
Notice the space before the second <span!
The uppercase words, and the capitalized ones (note the 'z').
Not fully supported
white-space
White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words.
This Text Formatting feature does not work in IE4 and has only partial support in NS4.
Values include: normal, pre, nowrap
<H4 style="white-space: pre">This is some text </H4>
This is some text
word-spacing
Word Spacing allows you to define the amount of space between words.
Note: This Text Formatting feature does not work in IE4 or NS4.
Values include: normal, length, auto
<P STYLE="word-spacing: 1cm">This is some text</P>
This is some text
letter-spacing
Letter Spacing allows you to define the amount of space between letters in each word.
Note: This Text Formatting feature does not work in NS4.
Values include: normal, length, auto
<P STYLE="letter-spacing: 0.1cm">This is some text</P>
This is some text
|