CSS Text and Font Formatting

This tutorial will teach you how to manipulate text using CSS properties. CSS Text properties allow you to define several text styles such as color, spacing, decoration, alignment, etc.
CSS Text Properties
CSS has several properties for defining the styles of text.These properties give you precise control over the visual presentation of characters, spaces, words, and paragraphs.
Text Color
Text color is defined by the CSS Color property

<style>
body {
    color: red;
}

h1 {
    color: #00ff00;
}
p.ex {
    color: rgb(0,0,255);
}
</style>

Text Alignment
The text-align property is used to set the horizontal alignment of a text.

Possible values of text-align property are: left, right, center, justify
Example

  h1 {
        text-align: center;
    }
    p {
        text-align: justify;
    }

Text Decoration
The text-decoration property is used to set or remove decorations from text.
Possible values of text-decoration property are: none, underline, overline, line-through
Example

h1 {
        text-decoration: overline;
    }
    h2 {
        text-decoration: line-through;
    }
    h3 {
        text-decoration: underline;
    }

Change Link Underlines
The text-decoration property is sometimes used to remove the standard underlines from links. Removing the underline completely can confuse the visitor. Unless you provide some other visual cues to make it stands out, while dress up the link.
Example

     a {
        text-decoration: none;
        border-bottom: 1px dotted;
    }

Text Transformation
The text-transform property is used to set the cases for a text.
It can be used to set element’s text content into uppercase or lowercase letters, or capitalize the first letter of each word.Possible values of text-transform property are: none, capitalize, uppercase, lowercase

    p.up {
        text-transform: uppercase;
    }
    p.cap {
        text-transform: capitalize;
    }
    p.low {
        text-transform: lowercase;
    }

Text Indentation
The text-indentation property is used to set the indentation of the first line of text of an element. Possible values of text-indent property are: percentage (%), length
example

   p {
        text-indent: 100px;
    }

CSS Word Spacing
The word-spacing property used to sets the spacing between words in the text content of an element.

  • Word spacing can be affected by text justification. See the text-align property.
  • When whitespace is preserved all space characters are affected by word spacing. See white-space property.

Possible values of word-spacing property are: length (specifying the space to be inserted between words), normal
Example

    p.one {
        word-spacing: 20px;
    }
    p.two {
        word-spacing: 20px;
        text-align: justify;
    }
    p.three {
        word-spacing: 20px;
        white-space: pre;
    }

CSS Letter Spacing
The letter-spacing property used to sets extra spacing between characters in the text content of an element.
Possible values of letter-spacing property are: length (specifying the extra space to be inserted between characters in addition to the default inter-character space), normal and inherit.
Example

  h1 {
        letter-spacing: -3px;
    }
    p {
        letter-spacing: 10px;
    }

CSS Line Height
The line-height property defines height (also called leading) of a line of text. Possible values of line-height property are: percentage (%), length, number, normal and inherit.
Example

   p {
        line-height: 1.2;
    }

When the value is a number, the line height is calculated by multiplying the element’s font size by the number. While, percentage values are relative to the element’s font size.

CSS Fonts

CSS font properties used to set font family, boldness, size, variant and the style of a text
Font Properties
The font properties are: font-family, font-style, font-variant, font-weight and font-size.
Font Family
The font-family CSS property allows setting a prioritized list of font family name and/or generic family name for the text content of a selected element.
The font-family property should hold several font names as a “fallback” system. List the font that you want first, then any fonts that might fill in for the first if it is unavailable.
You should end the list with a generic font family, which are five: serif, sans-serif, monospace, cursive and fantasy. A font-family declaration might look like this:
Example

   p {
        font-family: "Times New Roman", Times, serif;
    }

Font Style
The font-style property sets the font style to be applied for the text content of an element.
The possible values of font-style property are normal, italic or oblique
Example

   p.one {
        font-style: normal;
    }
    p.two {
        font-style: italic;
    }
    p.three {
        font-style: oblique;
    }

There is some confusion about the difference between oblique and italic.
Font Size

The font-size property sets the size of font to the text content of an element.

There are several ways to specify the font size, with keywords or numerical values for pixels
or ems.
Set Font Size with Keywords

By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

An absolute size is specified using one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large.

A relative size is specified using one of the following keywords: smaller, larger.
Example

   body {
        font-size: large;
    }
    h1 {
        font-size: larger;
    }
    p {
        font-size: smaller;
    }

Set Font Size with Pixels
Setting the font size in pixel values (px) is a good choice when you need pixel accuracy.
However, the results may vary across browsers, as they may use different algorithms to achieve a similar effect.
Example

   h1 {
        font-size: 24px;
    }
    p {
        font-size: 14px;
    }

Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. For instance, users with limited vision may wish to set the font size larger than the size chosen by a web designer. Therefore, avoid using pixels for font sizes if you wish to create an inclusive design
Set Font Size Using Combination of Percent and Em
The solution to achieve similar effect in all browsers is to set a default font-size in percent for the body element.

A popular technique to use throughout the document is to set the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em.
Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. See the example below:
Example

   body {
        font-size: 62.5%;    /* font-size 1em = 10px */
    }
    p {
        font-size: 1.6em;    /* 1.6em = 16px */
    }

Font Weight
The font-weight property specifies the weight or boldness of the font.
The possible values of font-style property are: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Example

   p {
        font-weight: bold;
    }

Since, most of the fonts are only available in a limited number of weights; often they are available only in normal and bold.
If the font isn’t available in the specified weight, an alternate will be chosen that is the closest available weight
Font Variant
The font-variant property allows the text to be displayed in a special type called small-caps.
Small-caps or Small Capital Letters are slightly different to normal capital letters, in which lowercase letters appear as smaller versions of the corresponding uppercase letters.
The possible values of font-style property are normal, small-caps
Example

p {
        font-variant: small-caps;
    }
xhamster

Admin has written 171 articles