This specifies how inline elements are aligned within their line box. Possible values are:
| Name | Effect |
|---|---|
| baseline | Place element on baseline - initial value |
| sub | Subscript element |
| super | superscript element |
| top | align top of element with tallest thing on the line |
| text-top | align top of element with top of parent's font |
| middle | aligns middle of element with the baseline + half the x-height of the parent font |
| bottom | align bottom of element with lowest thing on the line |
| text-bottom | align the bottom of the element with bottom of the parent's font |
Vertical-align is not inherited and applies only to inline and table-cell elements.
A negative or positive length or % can be specified, (% relating to the line-height). 0 = baseline. Positive = raise up, negative = lower. For example, vertical-align: 1em.
Most vertical align values are not supported by most browsers, and IE 3 does not support it at all.
This can be left (initial value = align the element to the left of the page), right, center, or justify (aligns to both margins). Text-align only applies to block elements and is inherited.
BODY {text-align: justify}
This can be none (initial), or one or more of underline, overline, line-through or blink. For example: text-decoration: underline overline. It is not inherited but since all elements that are descendants of an element are still in that element, they will therefore will have that text-decoration (and in the ancestor element's color as well)
DEL {text-decoration: line-through}
This has an initial value of 0, and can be set to a length or %. It is inherited and only applies to block elements. % refer to the width of the containing block. It refers to the indent of the first line of the element. It can be set to a negative value if you want an 'outdent'. For example, P {text-indent: 5%}
Possible values are none (initial value), lowercase, uppercase, or capitalize (capitalize the first letter of every word). It applies to all elements and is inherited. For example, P {text-transform: lowercase}
These properties are inherited, and indicate the amount of additional space between words or letters, where 0 is no extra space (note that if a value other than normal is set on letter-spacing, letter-spacing will not be adjusted for justification purposes). Alternatively, the normal (initial value) keyword can be specified. Negative values are permissible, but % are not.
Note that if letter-spacing is set to a value other than normal, browsers will not adjust letter-spacing in justifying text.
P {letter-spacing: normal;
word-spacing: .04in}
Opera and Netscape 5 are the only browsers that currently supports word-spacing. IE4 and 5 and Opera support letter-spacing.
This specifies how the element treats spacing; it takes the values normal (initial), pre (i.e., where a space or line break occurs in the markup, it occurs on screen = HTML <PRE> element) or nowrap (no line breaks except where <BR>). It is inherited and applies only to block elements. For example, P {white-space: pre}.
This property is only supported by Netscape 4.*, and then only so far as normal and pre.
Text-shadow is used, unsurprisingly, to give text shadow effects. It applies to all elements.
In order to apply text-shadows, you specify three things:
You can specify multiple shadows (which can overflow the element's box - they do not affect the box's size), which will be overlaid on top of each other in the order specified.
Thus text-shadow: horizontal-offset vertical-offset blur-radius color. E.g., text-shadow: 0 0 5px red. E.g., (or omitting the optional color (which is assigned the element's color) and blur radius) text-shadow: -3px 3px.
Positive horizontal offsets mean the offset is to the right, and negative to the left.
Positive vertical offsets mean the offset is below, and negative above.
Multiple shadow effects are specified by separating the shadows with commas. For example, text-shadow: 3px 3px, 2px 1ex red, 1ex 2ex 1ex green.
The next section considers lists.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.