 
|
| |
 |
CSS Tutorial - Text properties |
|
|
|
|
 |
Changing the text appearence using CSS |
|
|
CSS has several options for defining the styles of text.
T hese 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.
|
 |
CSS ATTRIBUTES |
 |
|
|
|
|
FONT PROPERTIES
Property |
Values |
NS |
IE |
Example |
font-family
|
font name
generic font |
4+
4+ |
4+
4+ |
font-family:arial
font-family:arial, helvetica
|
font-style
|
normal
italic
oblique |
4+
4+
|
4+
4+
4+ |
font-style:normal
font-style:italic
font-style:oblique |
font-variant
|
normal
small-caps |
|
4+
4+ |
font-variant:normal
font-variant:small-caps |
font-weight
|
normal
bold
bolder
lighter
100-900 |
4+
4+
4W
4W
4+ |
4+
4+
4+
4+
4+ |
font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:250 |
font-size
|
normal
length
length
absolute
absolute
absolute
absolute
absolute
absolute
absolute
relative
relative
percentage |
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+
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 |
A SSIGNING ALL FONT ATTRIBUTES AT ONCE
A n example of a typical font definition would be:
| B { font-family :arial, helvetica; font-size :12px; font-weight :bold;} |
B ut 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} |
T he 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
D espite 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
percentage |
4W
4+
4+
4+ |
4+
4P
4+
4P |
line-height:normal
line-height:1.5
line-height:22px
line-height:150% |
text-decoration
|
none
underline
overline
line-through
blink |
4+
4+
4+
4+ |
4M
4+
4W
4+
|
text-decoration:none
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink |
text-transform
|
none
capitalize
uppercase
lowercase
|
4+
4+
4+
4+ |
4W
4W
4W
4W |
text-transform:none
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase |
text-align
|
left
right
center
justify |
4+
4+
4+
4+ |
4+
4+
4+
4W |
text-align:left
text-align:right
text-align:center
text-align:justify |
text-indent
|
length
percentage |
4+
4+
|
4+
4+ |
text-indent:20px;
text-indent:10% |
white-space
|
normal
pre |
4+
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.
COLORS
A s you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color.
T he color is not part of the font collection in CSS - rather it has its own definition.
I f you want to add a color to the text in the above example you'd do it this way:
| B { font :arial, helvetica 12px bold; color :red} |
T he color property is explained in detail on the next page. |
| |
|
|
|
|
|
