The text on the page is defined by the font information i.e.


The generic name of a font that most browser's recognize is

Samples of various web safe font families

Web-safe fonts

Font size

Font size can be represented in pt (point), px (pixel), % (percent - relative to the font size) or em (relative to the font size).

The default font size is 12.

The code for font size is

font-size: value of font size

bold face, italic, and small cap can be set for fonts in the CSS

bold is <b>   font-weight: value where value is either normal or bold

italic is <i> font-style: value where value is either normal or italic

small cap means that the lower case letters are shown as upper case but smaller then the capital letters.

font-variant: value where value is either normal or small-caps.

Line Spacing

  By default the text lines in paragraphs is single space.

line-height: value where value is the distance between the lines in a paragraph. Value can be either pixel, points, em, or percentage. A number without a unit of measurement will also work.  This number can be a decimal and then works just like a percentage.  The word normal my also be used.

Font setting are usually place in the CSS body{} section if you want the setting to apply to whole site.

If you do not want to enter each font feature separately you in CSS you can use a font shorthand property

font: [style] [variant]  [weight] size[/height]  [family]

i.e.    body{

                      font: normal normal normal 10pt/1.5 Arial, Helvetica, Sans-Serif


If you do not want to type in normal, normal, normal the you can leave that part blank because normal is the default value. or you could use italic small-caps bold, italic normal bold, etc.


Color can be define for the text by

color: red

This goes on a separate line with you entering the color value.


text-decoration: overline

text-decoration: underline

text-decoration: line-through



text-shadow:horizontalOffset verticalOffset [blur] [color],... There is no spread for text shadow.

horizontal offset is a number with a unit of measure (i.e. pixel) positive puts  it on the right of the letter, negative puts it on the left of the number.

vertical offset is a number with a unit of measure (i.e. pixel) positive put is under the letter, negative puts it above the letter.

blur is optional. The larger the number the softer the edge. It is number with a unit of measure (i.e. pixel).

color is any valid color name or hex color code.  If omitted the shadow is the same color as the text.


text alignment

Text alignment applies to blocks but not inline code.  Thus, paragraphs, div, body h1 through h6. 

text-align: left

text-align: right

text-align: center


First line indent applies to paragraph.

text-indent: value where value is a number with a unit of measure.

i.e.  p{ text-indent: 20px}


Comments (0)

500 characters remaining

Cancel or