CSS has several options for defining the styles of text.
These options can entirely replace the <font> tag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML.
FONT PROPERTIES
Property
Values
NS
IE
Example font-family
font name
generic font4+
4+4+
4+font-family:arial
font-family:arial, helvetica
font-style
normal
italic
oblique4+
4+
4+
4+
4+font-style:normal
font-style:italic
font-style:obliquefont-variant
normal
small-caps
4+
4+font-variant:normal
font-variant:small-capsfont-weight
normal
bold
bolder
lighter
100-9004+
4+
4W
4W
4+4+
4+
4+
4+
4+font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:250font-size
normal
length
length
absolute
absolute
absolute
absolute
absolute
absolute
absolute
relative
relative
percentage4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+font-size:normal
font-size:14px
font-size:14pt
font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large
font-size:smaller
font-size:larger
font-size:75%
4P:problems, 4M:Mac only, 4W:Windows only
ASSIGNING ALL FONT ATTRIBUTES AT ONCE
An example of a typical font definition would be:
B {font-family:arial, helvetica; font-size:12px; font-weight:bold;}
But since all font attributes can actually be expressed with the font property we could actually write it this way:
B {font:arial, helvetica 12px bold}
The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is that you'd be assigning the same font face to all your styles, for example, while you'd want different font weights and sizes for headers and content areas etc.
TEXT PROPERTIES
Despite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc.
Property
Values
NS
IE
Example line-height
normal
number
length
percentage4W
4+
4+
4+4+
4P
4+
4Pline-height:normal
line-height:1.5
line-height:22px
line-height:150%text-decoration
none
underline
overline
line-through
blink4+
4+
4+
4+4M
4+
4W
4+
text-decoration:none
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blinktext-transform
none
capitalize
uppercase
lowercase
4+
4+
4+
4+4W
4W
4W
4Wtext-transform:none
text-transform:capitalize
text-transform:uppercase
text-transform:lowercasetext-align
left
right
center
justify4+
4+
4+
4+4+
4+
4+
4Wtext-align:left
text-align:right
text-align:center
text-align:justifytext-indent
length
percentage4+
4+
4+
4+text-indent:20px;
text-indent:10%white-space
normal
pre4+
4+
white-space:normal
white-space:pre
4P:problems, 4M:Mac only, 4W:Windows only
Note:
line-height :
When using a number (such as 1.5) the number refers to the font size, where 1.5 would mean that a 1.5 lines spacing (using the current font size) will be inserted between the lines.
text-transform :
Capitalize sets the first letter of each word in uppercase.
Uppercase forces all letters to uppercase.
Lowercase forces all letters to lowercase.
text-indent :
Use this to indent the first word of a paragraph.
white-space :
If white-space is set to pre the browser will show all spaces in the text, rather than ignoring all occurrences of more than one space. This is similar to the <pre> tag in plain HTML. Since the white-space is only supported by NS you should use the <pre> tag instead.
The official CSS standard provided by W3C also includes properties for word spacing, letter spacing and vertical align, but these aren't supported by today's browsers.
|
More Info
Know more about css?