CSS TUTORIAL :
CSS TEXT








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

PropertyValuesNSIEExample
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

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.

PropertyValuesNSIEExample
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

As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color.

The color is not part of the font collection in CSS - rather it has its own definition.

If 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}


The color property is explained in detail on the next page.




 << BACK TO MENU
READ MORE >>  
















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"