CSS Text

CSS provides several properties that allows us to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively.

The commonly used text properties are: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more. These properties gives us precise control over the visual appearance of the characters, words, spaces, and paragraphs.


Text Color

The color of the text is defined by the CSS color property. The style rule in the following example will define the default text color for the page.

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
}

Output:-

Although, the color property seems like it would be a part of the CSS text, but it is actually a standalone property in CSS.


Text Alignment

The text-align property is used to set the horizontal alignment of the text.

Text can be aligned in four ways: to the left, right, centre or justified (straight left and right margins).

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
   text-align: center;
}

Output:-

Note:- When text-align is set to justify, each line is stretched so that every line has equal width (except the last line), and the left and right margins are straight. This alignment is mainly used in publications such as magazines and newspapers.


Text Decoration

This property is used to set or remove decorations from text.

This property typically accepts one of the following values: underline, overline, line-through, and none. We should avoid underline text that is not a link, as it might confuse the visitor. By default, a link always has a line with it to differentiate.

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
   text-decoration: line-through;
}

Output:-

The text-decoration property is extensively used to remove the default underline from the HTML hyperlinks. We can further provide some other visual cues to make it stand out from the normal text, for example, using dotted border instead of solid underline.

a {
   color: #434343;
   text-decoration: none;
   border-bottom: 1px dotted;
}

Text Transformation

This property is used to set the cases for a text. Text are often written in mixed case. However, in certain situations we may want to display our text in entirely different case.

Using this property we can change an element’s text content into uppercase or lowercase letters, or capitalize the first letter of each word irrespective of original text case.

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
   text-transform: uppercase;
}

Output:-


Text Indentation

This property is used to set the indentation of the first line of text within a block of text. It is typically done by inserting the empty space before the first line of text.

The size of the indentation can be specified using percentage (%), length values in pixels, ems, etc.

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
	  text-indent: 100px;	
}

Output:-

Note: Whether the text is indented from the left or from the right depends on the direction of text inside the element, defined by the CSS direction property.


Letter Spacing

This property is used to set extra spacing between the characters of text.

This property can take a length value in pixels, ems, etc. It may also accept negative values but that makes our letters harder to read. When setting letter spacing, a length value indicates spacing in addition to the default inter-character space.

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
	  letter-spacing: 10px;	
}

Output:-


Word Spacing

This property is used to specify additional spacing between the words.

This property can accept a length value in pixels, ems, etc. Negative values are also allowed.

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
	  word-spacing: 20px;	
}

Output:-


Line Height

This property is used to set the height of the text line. It is also called leading and commonly used to set the distance between lines of text.

The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc.

Note: Negative values for the line-height property are not allowed. This property is also a component of the CSS font shorthand property.

Input:-

Index.html
	
<body>
      <p> Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal     distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>    
</body>

Style.css
body {
   color: #434343;
	  word-spacing: 20px;	
	  line-height: 58px;
}

Output:-