Post
Ask Question

Styling Text In CSS

Introduction

 
Text manipulation is an enjoyable part of learning CSS. Hopefully, you would agree with me. In fact, if you are an aspiring developer or just starting out with the web, text manipulation is one of the fundamentals that you need to understand. Just try to imagine this: CSS gives you the ability to change the text’s presentation the same way as you are using a word processing application.
 
That's why, in this post, we are going to tackle the different ways to manipulate text in CSS. Just a note, we might not be able to cover everything but I’ll do my best to tackle the most commonly-used ones. Lastly, we won’t be covering fonts here; there will be a separate article for that. OK, then let’s get started.
 

What is the CSS Text Manipulation?

 
There are CSS properties that can manipulate the presentation of the text in a variety of ways, from the length of space between letters in words of text, the color of text, and how much space is used to indent the text contained in a paragraph a whole lot more.
 
What are we going to cover?
  • color
  • text-decoration
  • text-transform
  • text-shadow
  • text-align
  • text-indent
  • line-height
  • letter-spacing
  • word-spacing
  • direction
  • white-space
Before starting with the examples, we will be using this HTML below as the main source that will be used throughout the entire CSS text manipulation properties.
 
Source Code Sample
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7.     <title>Document</title>  
  8.     <style type="text/css">  
  9.         /*this is the main style*/  
  10.         * {  
  11.             background-color: #dff6f0;  
  12.             margin: 0 auto;  
  13.             padding: 0px;  
  14.             font-size: 20px;  
  15.         }  
  16.   
  17.         div {  
  18.             width: 50%;  
  19.             margin: 10px auto;  
  20.             border: solid 5px #4d80e4;  
  21.             padding: 20px 10px 20px 10px;  
  22.         }  
  23.   
  24.         /*end of main style*/  
  25.     </style>  
  26. </head>  
  27.   
  28. <body>  
  29.     <div>  
  30.         <p>  
  31.             Pariatur nostrud magna duis officia veniam.  
  32.             In amet esse fugiat ea eu cillum.  
  33.             Nisi elit consectetur proident exercitation.  
  34.             Esse non commodo cillum exercitation proident Lorem commodo consectetur eu tempor pariatur nostrud duis.  
  35.         </p>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>  
As you can see, with our example we have defined the basic styles for the page and the div section where the text manipulation will occur. Moreover; I created it that way so it is easy for me to show a screenshot for this article. Remember, the main subject is text manipulation and the output will result inside the box.
 
Source Code Output
 
 

CSS color Property

 
This property actually sets the foreground color of the element's text. It can be defined in many ways such as using a color-keyword (blue, red, etc.), RGB, and HSL. For more information about it, please click this link.
 
Let's go straight with an example and make the text's color a bit grayish. 
  1. p {  
  2. color: #7f7c97;  
  3.   
  4. }  
Output
 
 

CSS text-decoration Property

 
This property is used to specify whether the text should be decorated with a line. Moreover, this property is commonly used to remove underlines from hyperlinks.
 
The commonly used values are,
  • none (no decoration), 
  • underline
  • overline (a line above text)
  • line-through (a line through the text)
You can play around with the values but with our example, let's try to show a red underline.
  1. p {  
  2.     color: #7f7c97;  
  3.     text-decoration: underline;  
  4.     text-decoration-style: solid;  
  5.     text-decoration-color: red;  
  6. }     
Another thing to point out, text-decoration property it is also a shorthand for text-decoration line, text-decoration-color, text-decoration-style. Thus you can also use the same code below. 
  1. p {    
  2.     color: #7f7c97;    
  3.     text-decoration:underline red solid;    
  4. }   
Output
 
 

CSS text-transform Property

 
Sometimes you might want to change text case  using this property.
 
The commonly used values are
  • none (doesn't transform the text)
  • capitalize (change the first letter fo each word to uppercase)
  • uppercase (change all the text to uppercase)
  • lowercase (change all the text to lowercase) 
You can play around with the values but with our example, let's try to make the text all uppercase. 
  1. p {  
  2.     color: #7f7c97;  
  3.     text-transform: uppercase;  
  4. }    
Output
 
 
 

CSS text-shadow Property

 
Sometimes we want to add some shadow to our text and using this property allows you to do that. 
 
This property text-shadow takes three values
  • The first value represents the horizontal offset  (how far the shadow is to the right of the text, a negative value to the left).
  • The second value represents the vertical offset (how far the shadow is to the bottom of the text, a negative value to the top).
  • The third and last value is the blur of the shadow. 
In our example, let's try to make it a bit bloody.
  1. p {  
  2.     color: #7f7c97;  
  3.     text-shadow: 2px 2px 8px #FF0000;  
  4. }     
Output
 
 
 

CSS text-align Property

 
This property allows us to specify whether we want the text to be centered, or aligned to the left or right, or justified.  
 
The commonly used values:
  • left (text will be left-aligned)
  • right (text will be right-aligned)
  • center (text will be centered)
  • justify (text will be justified)
In our example, let's try to make the text centered.
  1. p {  
  2.     color: #7f7c97;  
  3.     text-align: center;  
  4. }     
Output
 
 
 

CSS text-indent Property

 
This property applies indentation to the first line of text in a block container, using either a unit of lengths such as pixels and ems, or percentage that is relative to the width of the containing block.
  1. p {  
  2.     color: #7f7c97;  
  3.     text-indent: 200px; /*Made a bit larger to make it evident*/  
  4. }     
Output
 
 

CSS line-height property

 
This property specifies the minimal height of a line of text within an element. You can specify a unit of length, percentage, or number.  
 
In our example, let's make it twice its size.
  1. p {  
  2.     color: #7f7c97;  
  3.     line-height: 2em;  
  4. }     
Output
 
 
 

CSS letter-spacing Property 

 
This property controls the amount of space between each individual character with the initial value of normal (default). You can play around with this until you get what you to want to see. 
 
In our example, let's make the space between letters at least 10px. 
  1. p {  
  2.     color: #7f7c97;  
  3.     letter-spacing: 10px;  
  4. }   
Output
 
 

CSS word-spacing Property

 
This property controls the spacing between words. The initial value of normal represents the default space between words. 
 
In our example, let's try to adjust the space between words. 
  1. p {  
  2.     color: #7f7c97;  
  3.     word-spacing: 15px;  
  4. }  
Output
 
 
 

CSS direction Property

 
This property determines the direction of the text. Seems easy to understand. The initial value ltr means left to right. 
 
The commonly used values,
  •  ltr (left to right) 
  • rtl (right to left) 
In our example, let's try to make the direction right to left. 
  1. p {  
  2.     color: #7f7c97;  
  3.     direction: rtl;  
  4. }    
Output
 
 
 

CSS white-space Property

 
This property determines the white space inside an element that would be handled.
 
In our example, let try to make the whitespace be preserved by the browser and wrap text when necessary, and online breaks. 
  1. p {  
  2.     color: #7f7c97;  
  3.     white-space: pre-wrap;  
  4. }   
Output
 
 
 

Summary

 
In my opinion, CSS gives you a lot of tools to manipulate or format text in your web pages. Moreover; because web-technology evolves fast, we might see more features in the future that are being added by browsers as CSS evolves.
 
In this article, we have discussed the following CSS text manipulation properties,
  • color
  • text-decoration
  • text-transform
  • text-shadow
  • text-align
  • text-indent
  • line-height
  • letter-spacing
  • word-spacing
  • direction
  • white-space
I hope you have enjoyed this article, as I have enjoyed writing it. Until next time, happy programming!
 
References


Similar Articles