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

font-family:[familyname].........genericname;

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

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

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]

  • style: This can be italic or normal. If you leave it out, it defaults to normal.
  • variant: This can be small-caps or normal. If you leave it out, it defaults to normal.
  • weight: This can be bold or normal. If you leave it out, it defaults to normal.
  • size: This should be a font size expressed as a number followed by a unit of measure like pt (points), px (pixels), % (percent), or em (relative size).
  • /line-height:  This is a number followed by a unit of measure as above. If omitted, it defaults to the normal spacing for the font (usually about 120%). Only type the slash if you provide a line height. If you don't specify a line height, don't type the slash.
  • family: This is a wish list of font names and a generic font name. Same as you'd type using font-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

Color can be define for the text by

color: red

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

 TEXT DECORATION

text-decoration: overline

text-decoration: underline

text-decoration: line-through

 

TEXT SHADOW

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

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