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 properties 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

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Color</title>
</head>
<body>
  <p style="color: orange;">CSS text color name orange</p>
  <p style="color: #FFA500;">CSS text hexadecimal code #FFA500</p>
  <p style="color: rgb(255,156,0);">CSS text RGB color code rgb(255,156,0)</p>
</body>
</html>

Run it...   »

CSS text-align

CSS text-align property use to set the horizontal alignment of text.
text-align possible 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

<!DOCTYPE html>
<html>
<head>
  <title>CSS Text Align</title>
</head>
<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, this is example of CSS text-align justify type. Both side left
  and right are equal. Its like newspaper or book type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type.</p>
</body>
</html>

Run it...   »

CSS text-indent

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS text-indent</title>
</head>
<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 left side leave blank space end of blank space start a first line paragraph text.</p>
</body>
</html>

Run it...   »

CSS text-decoration

CSS text-decoration property use to decorate the text.

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS text-decoration</title>
</head>
<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>
</html>

Run it...   »

CSS text-transformation

CSS text-transformation property use to text transform.

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

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS text-transform</title>
</head>
<body>
  <p style="text-transform: capitalize">This text transform to capital.</p>
  <p style="text-transform: lowercase">This text transform to lowercase.</p>
  <p style="text-transform: uppercase">This text transform to uppercase.</p>
</body>
</html>

Run it...   »

CSS letter-spacing

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS letter-spacing</title>
</head>
<body>
  <p style="letter-spacing: 5px;">This text is represent letter spacing.</p>
</body>
</html>

Run it...   »

CSS word-spacing

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS word-spacing</title>
</head>
<body>
  <p style="word-spacing: 25px;">This text is represent word spacing.</p>
</body>
</html>

Run it...   »

CSS white-space

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS white-space</title>
</head>
<body>
  <p style="white-space: pre;">This text is represent predefined text

  predefined area another text</p>
</body>
</html>

Run it...   »

CSS text-shadow

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

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS text-shadow</title>
</head>
<body>
  <p style="text-shadow: 4px 4px 8px orange;">This text is represent text shadow effect.</p>
</body>
</html>

Run it...   »