in

CSS Text | Learn How to Design Text in Web Document Using CSS

In this tutorial we will be discussing about CSS text and how you can design text on web document using CSS.  In our previous tutorial we talked about CSS Fonts and how you can add them to your web document. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS FONTS | Learn How To Design Web Fonts Using CSS

CSS FONTS

There are some text properties you can adjust using CSS. Some of this properties include:

  • The text color
  • The word-spacing
  • The letter-spacing
  • The text-indent
  • The text-direction
  • The text-decoration
  • The text-shadow
  • The white-space
  • The text transform

The Text Color

We can set the text color on our web page following the example below

<!DOCTYPE html>
<html lang="en">
<head>
  
     
   
   <title>Text color illustration</title>
</head>
<body >
   <p style="color: blue; " > text blue color</p>
   <p style="color: red;" >text red color</p >
   <p style="color:green;" >text green color</p>
   <p style="color: yellow;" >text yellow color</p>
   
   

</body>
</html>

Result

Text color illustration

text blue color

text red color

text green color

text yellow color

The word-spacing

We can add spacing between words on our web document using CSS. illustration shown below

<!DOCTYPE html>
<html lang="en">
<head>
 
   <title>word-spacing illustration</title>
</head>
<body >
   <p style="word-spacing: 1px;"> 1px word spacing </p>
   <p style="word-spacing: 2px;"> 2px word spacing </p>
   <p style="word-spacing: 5px;"> 5px word spacing </p>
   <p style="word-spacing: 10px;"> 10px word spacing </p>
   <p style="word-spacing: 30px;"> 30px word spacing </p>
</body>
</html>

Result shown below

word-spacing illustration

1px word spacing

2px word spacing

5px word spacing

10px word spacing

30px word spacing

The Letter-spacing

We can add spacing between letters on our web document using CSS. Illustration shown below

<!DOCTYPE html>
<html lang="en">
<head>
 
   <title>letter-spacing illustration</title>
</head>
<body >
   <p style="letter-spacing: 1px;"> 1px letter spacing </p>
   <p style="letter-spacing: 2px;"> 2px letter spacing </p>
   <p style="letter-spacing: 5px;"> 5px letter spacing </p>
   <p style="letter-spacing: 10px;"> 10px letter spacing </p>
   <p style="letter-spacing: 30px;"> 30px letter spacing </p>
  
</body>
</html>

Result on web browser

letter-spacing illustration

1px letter spacing

2px letter spacing

5px letter spacing

10px letter spacing

30px letter spacing

The text-indent

we can indent a paragraph sentence in a web document using the text-indent CSS text property. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
 
   <title>text-indent illustration</title>
</head>
<body >
   <p style="text-indent: 1cm;"> This shows the first paragraph been indented by 1cm and this line will remain at 
      its actual position. </p>
      <p style="text-indent: 2cm;"> This shows the second paragraph been indented by 2cm and this line will remain at 
         its actual position. </p>
   
  
</body>
</html>

Result

text-indent illustration

This shows the first paragraph been indented by 1cm and this line will remain at its actual position.

This shows the second paragraph been indented by 2cm and this line will remain at its actual position.

The text-direction

we can format the text direction on the HTML web document to start from any direction. The text can start from “left to right”or from “right to left”. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
 
   <title>text-direction illustration</title>
</head>
<body >
   <p style="direction: ltr;"> This shows the first paragraph in the left to right </p>
      <p style="direction: rtl;"> This shows the second paragraph in the right to left direction </p>
   
  
</body>
</html>

Result

text-direction illustration

This shows the first paragraph in the left to right

This shows the second paragraph in the right to left direction

The text-decoration

We can decorate the text on the HTML web document. we can add properties such as underscore, italics, bold,colors etc

<!DOCTYPE html>
<html lang="en">
<head>
 
   <title>text-decoration illustration</title>
</head>
<body >
   <p style="text-decoration: underline;"> This shows the text underlined  </p>
   <p style="text-decoration: overline;"> This shows the text overlined  </p>
   <p style="text-decoration: line-through;"> This shows the text striked through  </p>
</body>
</html>

Result

text-decoration illustration

This shows the text underlined

This shows the text overlined

This shows the text striked through

The text-shadow

We can improve our text by adding shadow to the text. in advance customization this is very important in most cases. Illustration shown below

<!DOCTYPE html>
<html lang="en">
<head>
 
   <title>text-decoration illustration</title>
</head>
<body >
   <p style="text-shadow: 3px 5px 10px blue;"> This shows the text with shadow  </p>
   
</body>
</html>

Result

text-decoration illustration

This shows the text with shadow

The white-space

The below example shows how to insert white space in HTML web document

<!DOCTYPE html>
<html lang="en">
<head>
 
   <title>text-decoration illustration</title>
</head>
<body >
   <p style="white-space: pre;"> This shows the text with white space  </p>
   <p style="white-space: nowrap;"> This shows the text with white space  </p>
   <p style="white-space: normal;"> This shows the text with white space  </p>
   <p style="white-space: initial;"> This shows the text with white space  </p>
   <p style="white-space: pre-wrap;"> This shows the text with white space  </p>
  
</body>
</html>

Result

text-decoration illustration

This shows the text with white space

This shows the text with white space

This shows the text with white space

This shows the text with white space

This shows the text with white space

The text transform

The text-transform CSS text property helps to transform the text to either capitalized text , upper case or lower case. Illustration shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>text-decoration illustration</title>
</head>
<body >
   <p style="text-transform: capitalize;"> This shows the text in capitalized form </p>
   <p style="text-transform: lowercase;"> This shows the text in lowercase  </p>
   <p style="text-transform: uppercase;"> This shows the text in uppercase  </p>
</body>
</html>

Result

text-decoration illustration

This shows the text in capitalized form

This shows the text in lowercase

This shows the text in uppercase

conclusion

The CSS text properties listed above are needed when styling your text for a web document. A good understanding of this property will enable you make good web page text formatting and structure. Lets move on to the next topic on CSS IMAGES

What do you think?

CSS fonts

CSS FONTS | Learn How To Design Web Fonts Using CSS

css images

CSS Images | Learn How to Design Image Properties in Web Document