Configuring Text with CSS

Font-family Property

This property is used to alter the font face. Since not all computers have the same fonts installed, issues may occur (however there are ways to embed fonts). Although specific fonts can be named, providing a fallback generic font category is also a good idea. Those fallback categories include serif, sans-serif, monospace, cursive, and fantasy.

body {font-family: Arial, Helvetica, sans-serif;}

Font-size Property

The font size may be altered in several manners.

• text-value (ranging from xx-small to xx-large)
• pixel unit (px)
• point unit (pt)
• em unit (em)
• rem unit (rem)
• percentage value (%)

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
}

Font-weight Property

The font-weight property configures the boldness of the text. Values include normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, and 900.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
}

Font-style Property

The font-style property alters how the font is displayed: values include normal, italic, and oblique.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
}

Line-height Property

This property specifies the space between lines and is often configured using a percentage. 200% will essentially create a double-spaced web page.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
}

Text-align Property

This property controls alignment: left, center, and right. The default value is left.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
    text-align: center;
}

Text-indent Property

This property configures indentation of the first line of text and can be configured using px, pt, em, or % values.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
    text-align: center;
    text-indent: 25%;
}

Text-decoration Property

This property controls appearance: values include none, underline, over-line, line-through.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
    text-align: center;
    text-indent: 25%;
    text-decoration: line-through;
}

Text-transform Property

The text-transform property modifies the capitalization of text. Values include none, capitalize, uppercase, and lowercase.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
    text-align: center;
    text-indent: 25%;
    text-decoration: line-through;
    text-transform: capitalize;
}

Letter-spacing Property

The letter-spacing property configures the space between letters; may be assigned using the keyword normal or a numeric pixel or em unit. In word processing, this is termed kerning.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
    text-align: center;
    text-indent: 25%;
    text-decoration: line-through;
    text-transform: capitalize;
    letter-spacing: 5px;
}

Word-spacing Property

This property configures the space between words.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
    text-align: center;
    text-indent: 25%;
    text-decoration: line-through;
    text-transform: capitalize;
    letter-spacing: 5px;
    word-spacing: 10px;
}

White-space Property

This property specifies how white space is displayed. There are three possible values: normal, nowrap, and pre. Normal causes extra spaces to be hidden. Nowrap prevents wrapping to the next line, and pre preserves all existing spaces.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 900;
    font-style: normal;
    line-height: 200%;
    text-align: center;
    text-indent: 25%;
    text-decoration: line-through;
    text-transform: capitalize;
    letter-spacing: 5px;
    word-spacing: 10px;
    white-space: pre;
}

Text-shadow Property

The text shadow property is used to create shadows around the text. Four properties are available, in the following order. Note that you can include multiple sets of values in one statement to create interesting effects by combining shadows. Simply separate the values with a comma.

1. horizontal shadow (positive values move to the right, while negative values move the shadow to the left)
2. vertical shadow (positive values move the shadow down, while negative values move the shadow upward)
3. blur-radius (optional) (This defines how spread out the shadow appears)
4. color (optional)

text-shadow: 2px 2px 8px #FF0000;

text-shadow: 2px 2px 8px #FF0000,
    5px 5px 8px green,
    -6px -6px 8px silver;