CSS 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,

    LTR Direction

    renders

    LTR Direction

    With a CSS declaration of,

    p {
      direction:rtl;
    }

    The following HTML,

    RTL Direction

    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,

    8px between letters

    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,

    30px between line 1
    and line 2.

    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-justifiedExamples 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,

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

    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 performedFor 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,

    Words here are separated by 5px.

    renders

    Words here are separated by 5px.

    • author

    This post was written by: Rajendra Prasad

    Rajendra Prasad is a professional blogger, web designer and front end web developer. Follow him on Facebook

    Screamers toolbar
    All Rights Reserved The Origin for Screamers | Design by SCREAMERS
    Computers
    Top Blogs