CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Text Formatting Properties


CSS TEXT properties are various type like text color, text-align, text-decoration, letter-spacing and many more properties.

Using this propeties you can change the text formatting style.

Following are some CSS text properties listed. Using these properties you can play with text formatting style.


CSS Color

CSS color property use to set the Text color. The color value can be specified following three types:

  1. Color Name: Orange
  2. Color Hexadecimal Code: #FFA500
  3. Color RGB: rgb(255, 165, 0)

Example Code:

<body>
	<p style="color:orange;">CSS TEXT color name orange</p>
	<p style="color:#FFA500;">CSS TEXT color hexadecimal code #FFA500</p>
	<p style="color:rgb(255,156,0);">CSS TEXT RGB color code rgb(255,156,0)</p>
</body>
		

Run it...   »

Example Result:

CSS TEXT color name orange

CSS TEXT color hexadecimal code #FFA500

CSS TEXT RGB color code rgb(255,156,0)


CSS text-align

CSS text-align property use to set the horizontal alignment of text.
text-align posible value center, left, right, or justify.
When you set text-align property value justify than the effect is both width (left or right) equal like newspaper or books type.

Example Code:

<body>
	<p style="text-align:right;">CSS TEXT align right</p>
	<p style="text-align:center;">CSS TEXT align center</p>
	<p style="text-align:left;">CSS TEXT align left</p>
	<p style="text-align:justify;">Hello reader, this ia example of CSS text-align justify type. Both side left
	and right are equal. Its like newspaper or book type. Hello reader, this ia example of CSS text-align justify type. 
	Both side left and right are equal. Its like newspaper or book type. Hello reader, this ia example of CSS text-align 
	justify type. Both side left and right are equal. Its like newspaper or book type.</p>
</body>
		

Run it...   »

Example Result:

CSS TEXT align right

CSS TEXT align center

CSS TEXT align left

Hello reader, this ia example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type. Hello reader, this ia example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type. Hello reader, this ia example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type.


CSS text-indent

CSS text-indent property is used to set the paragraph first line leftside leave the blank space.

Example Code:

<body>
	<p style="text-indent:35px;">This paragraph is example of CSS text-indent property and value set 35px (pixel).
	So it means paragraph first line leftside leave blank space end of blank space start a first line paragraph text.</p>
</body>
		

Run it...   »

Example Result:

This paragraph is example of CSS text-indent property and value set 35px (pixel). So it means paragraph first line leftside leave blank space end of blank space start a first line paragraph text.


CSS text-decoration

CSS text-decoration property use to decorate the text.

CSS text-decoration posible value underline, overline, blink, through etc.

Example Code:

<body>
	<p style="text-decoration:underline;">Text is underline decorate</p>
	<p style="text-decoration:overline;">Text is overline decorate</p>
	<p style="text-decoration:blink;">Text is blink decorate</p>
	<p style="text-decoration:line-through;">Text is line delete decorate</p>
	<p style="text-decoration:none;">Text is Nothing any decorate value</p>
</body>
		

Run it...   »

Example Result:

Text is underline decorate

Text is overline decorate

Text is blink decorate

Text is line delete decorate

Text is nothing any decorate value


CSS text-transformation

CSS text-transformation property use to text transform.

CSS text-transformation posible value capitalize, lowercase and uppercase in a text.

CSS text-transformation property value capitalize, it means first letter capital for all word.

Example Code:

<body>
	<p style="text-transform:capitalize;">this line transform capital</p>
	<p style="text-transform:lowercase;">this line transform Lowercase</p>
	<p style="text-transform:uppercase;">this line transform Uppercase</p>
</body>
		

Run it...   »

Example Result:

this line transform capital.

this line transform Lowercase.

this line transform Uppercase.


CSS letter-spacing

CSS letter-spacing property set blank space between each two letter.

Example Code:

<body>
	<p style="letter-spacing:5px">This text is letter spacing</p>
</body>
		

Run it...   »

Example Result:

This text is letter spacing


CSS word-spacing

CSS word-spacing property set blank space between each two word.

Example Code:

<body>
	<p style="word-spacing:25px">This text is Word Spacing</p>
</body>
		

Run it...   »

Example Result:

This text is Word Spacing


CSS white-space

CSS white-space property use to set a predefine task. CSS white-space possible value is normal, pre.

Example Code:

<body>
<p style="white-space:pre">This text is Predefined Area

	Predefined area second line</p>
</body>
		

Run it...   »

Example Result:

This text is Predefined Area Predefined area second line


CSS text-shadow

CSS text-shadow property is use to decorate text and apply shadow effect style.

Example Code:

<body>
	<p style="text-shadow:4px 4px 8px orange;">This text is Text Shadow Effect</p>
</body>
		

Run it...   »

Example Result:

This text is Text Shadow Effect