CSS Text

SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization


CSS Tutorial  >  Text

Here are the most commonly-used CSS properties related to text.

  • direction
  • letter-spacing
  • line-height
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • word-spacing

    direction

    The direction property specifies the text direction. Possible values are 'ltr' and 'rtl'.

    For example, with a CSS declaration of,

    p {
      direction:ltr;
    }

    The following HTML,

    <p>LTR Direction</p>

    renders

    LTR Direction

    With a CSS declaration of,

    p {
      direction:rtl;
    }

    The following HTML,

    <p>RTL Direction</p>

    renders

    RTL Direction

    letter-spacing

    The letter-spacing property specifies the amount of space between characters. For example, with a CSS declaration of,

    p {
      letter-spacing:8px;
    }

    The following HTML,

    <p>8px between letters</p>

    renders

    8px between letters

    line-height

    The line-height property specifies the amount of space between lines. For example, with a CSS declaration of,

    p {
      line-height:30px;
    }

    The following HTML,

    <p>30px between line 1<br>and line 2.</p>

    renders

    30px between line 1
    and line 2.

    text-align

    The text-align property specifies how text is justified. Possible values are:

  • left: left-justified
  • right: right-justified
  • center: text is centered
  • justified: text is both right- and left-justified

    Examples below:

    CSS DeclarationOutput

    p {
      text-align:left;
    }

    This sentence illustrates what it looks like to be left-justified.

    p {
      text-align:right;
    }

    This sentence illustrates what it looks like to be right-justified.

    p {
      text-align:center;
    }

    This sentence illustrates what it looks like to be centered.

    p {
      text-align:justify;
    }

    This sentence illustrates what it looks like to be fully-justified.

    text-decoration

    The text-decoration property specifies how text is decorated. Possible values are:

  • underline: adds an underline to the text
  • overline: adds a line on top of the text
  • line-through: adds a line through the middle of the text.
  • blink: causes the text to blink.

    Examples below:

    CSS DeclarationOutput

    p {
      text-decoration:underline;
    }

    An underline example

    p {
      text-decoration:overline;
    }

    An overline example

    p {
      text-decoration:line-through;
    }

    A strikethrough (line-through) example

    text-indent

    The text-indent property specifies how much space to indent before the first line of the text in a block. Both length and percentage can be used. For example, with a CSS declaration of,

    p {
      text-indent:15px;
    }

    The following HTML,

    <p>This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.</p>

    renders

    This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

    text-transform

    The text-transform property controls how upper and lower cases are displayed. Possible values are:

  • capitalize: capitalizes the first letter in a word
  • uppercase: makes the entire word upper case
  • lowercase: makes the entire word lower case
  • none: no transform is performed

    For example, if we apply each of the following CSS style to the text "this is a LAWYER", we get the following:

    CSS DeclarationOutput

    p {
      text-transform:capitalize;
    }

    this is a LAWYER

    p {
      text-transform:uppercase;
    }

    this is a LAWYER

    p {
      text-transform:lowercase;
    }

    this is a LAWYER

    word-spacing

    The word-spacing property controls the amount of space between words. For example, with a CSS declaration of,

    p {
      word-spacing:5px;
    }

    The following HTML,

    <p>Words here are separated by 5px.</p>

    renders

    Words here are separated by 5px.

    Next: CSS Float




    Copyright © 2014   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact