CSS- Text

This chapter teaches you how to using CSS properties in text. You can use the following text properties to style your text -

  • The color property is used to set the color of a text.
  • The direction property is used to set the text direction.
  • The letter-spacing property is used to add or subtract space between the letters that make up a word.
  • The word-spacing property is used to add or subtract space between the words of a sentence.
  • The text-indent property is used to indent the text of a paragraph.
  • The text-align property is used to align the text of a document.
  • The text-decoration property is used to underline, overline, and strikethrough text.
  • Set the Text Color

    This example describe how to set the text color. Possible value could be any color name in any valid format.

    Example :-

    Result

    This text will be written in red.

    Set the Space between Characters

    This example describe how to set the space between characters. Possible values are normal or a number specifying space.

    Example :-

    Result

    This text is having space between letters.

    Set the Text Direction

    The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.

    Example :-

    Result

    This text will be renedered from right to left

    Set the Text Indent

    This example describe how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.

    Example

    Result

    This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property.

    Set the Text Alignment

    This example describe how to align a text. Possible values are left, right, center, justify.

    Example

    Result

    This will be right aligned.

    This will be center aligned.

    This will be left aligned.

    Set the Text Cases

    This example describe how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.

    Example

    Result

    This will be capitalized

    This will be in uppercase

    This will be in lowercase

    Set the Text Shadow

    This example describe how to set the shadow around a text. This may not be supported by all the browsers.

    Example

    Result

    If your browser supports the CSS text-shadow property, this text will have a blue shadow.