HTML and CSS Reference
In-Depth Information
Figure 3-35
Values of the vertical-align style
Value
Description
baseline
Aligns the element with the bottom of lowercase letters in surrounding text (the
default)
bottom
Aligns the bottom of the element with the bottom of the lowest element in surround-
ing content
middle
Aligns the middle of the element with the middle of the surrounding content
sub
Subscripts the element
super
Superscripts the element
text-bottom
Aligns the bottom of the element with the bottom of the font of the surrounding
content
text-top
Aligns the top of the element with the top of the font of the surrounding content
top
Aligns the top of the element with the top of the tallest object in the surrounding
content
Instead of using keywords, you can specify a length or a percentage for an element
to be aligned relative to the surrounding content. A positive value moves the element up
and a negative value lowers the element. For example, the style
The subscript and super-
script styles lower or raise
text vertically, but do not
resize it. To create true
subscripts and super-
scripts, you also must
reduce the font size.
vertical-align: 50%;
raises the element by half of the line height of the surrounding content, while the style
vertical-align: -100%;
drops the element an entire line height below the baseline of the current line.
Combining All Text Formatting in a Single Style
You've seen a lot of different text and font styles. You can combine most of them into a
single property using the shortcut
font
property
font:
font-style font-variant font-weight font-size/line-height
font-family
;
where
font-style
is the font's style,
font-variant
is the font variant,
font-weight
is the weight of the font,
font-size
is the size of the font,
line-height
is the height of
each line, and
font-family
is the font face. For example, the style
font: italic small-caps bold 18px/24px Arial, sans-serif;
displays the text of the element in italic, bold, and small capital letters in Arial or another
sans-serif font, with a font size of 18 pixels and spacing between the lines of 24 pixels.
You do not have to include all of the values in the
font
property; the only required
values are
font-size
and
font-family
. A browser assumes the default value for any
omitted property. However, you must place any properties that you do include in the
order indicated above.
Tammy would like the address in the page footer formatted differently from the default
style imposed by the browser's internal style sheet. She suggests that you display the text
in a semi-transparent white Times New Roman font on a dark green background and
centered on the page. She also suggests that you use the small-cap font variant to add
visual interest, and increase the height of the address line to 4em. To make your CSS
code more compact, you'll add all of the font values within a single line using the
font
property.
