Text Formatting in CSS:

With the help of CSS you can also format text with different properties. CSS will help you to manipulate text. You can set following text properties to the HTML elements:

  • Text Alignment
  • Text Color
  • Text Direction
  • Text Decoration
  • Text Indent
  • Text Transformation
  • Letter Spacing
  • Word Spacing
  • White Space
  • Text Shadow

Text Alignment:

You can set the alignment of the text with the help of “text-alignment” property. By default texts always align left but you can align text in center or in right. You can also set the alignment of text to justify.

Example:

Text Color:

You can set the color of text with the help of CSS “color” property. You can assign the name of color like “green” or hexadecimal value of color like “#FFYY66” or rgb value of color like “rgb(255,122,23)”.

Example:

Text Direction:

You can also set the direction of the text means form where to start. There are only two directions in CSS.

  • First one is “ltr” means “left to right” and it is by default.
  • Second one is “rtl” means “right to left”.

Example:

Because “ltr” is by default so that we take the example for “rtl”

Text Decoration:

You set or remove the decoration of text with the help of “text-decoration” property.

You can underline a text, you can over line a text, you can also cut the text by line through etc.

Example:

In following example we do all the decoration

Text Indent:

You can also set from where the first line of paragraph should start for this you have to use “text-indent” property. The value you can assign in “%” or in number or in pixels.

Example:

Text Transformation:

With the help of “text-transform” property you can define lowercase and uppercase format for letters in text.

  • Lowercase: if you set the property to lowercase so all letters will be display on browser in lowercase if you have written it in HTML code in uppercase.
  • Uppercase: if you set the property to uppercase so all letters will be display on browser in uppercase if you have written it in HTML code in lowercase.
  • Capitalized: if you set the property to capitalize so the first letter of all text will be display on browser in capital format if you have written it in HTML code in lowercase or in uppercase.

Example:

Letter Spacing:

You can set the space between characters with the help of “letter-spacing” property.

Example:

Word Spacing:

You can also set the spacing between words with the help of “word-spacing” property.

Example:

White Space:

The white space property is use to set the white space in text. Some possible values are pre, normal, wrap.

Example:

Text Shadow:

You can also set the shadow for text. It is may be not supported by all browser.

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *