HTML and CSS Reference
In-Depth Information
Figure 3-35
Values of the vertical-align style
Aligns the element with the bottom of lowercase letters in surrounding text (the
Aligns the bottom of the element with the bottom of the lowest element in surround-
ing content
Aligns the middle of the element with the middle of the surrounding content
Subscripts the element
Superscripts the element
Aligns the bottom of the element with the bottom of the font of the surrounding
Aligns the top of the element with the top of the font of the surrounding content
Aligns the top of the element with the top of the tallest object in the surrounding
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
Search WWH ::

Custom Search