CSS Text

By | October 3, 2021
CSS Text

There are many tags present in HTML which can represent textual data on the web page, and <p>, <h1>, <h2>, etc are the common ones. By the end of this tutorial, you will know about all the important CSS properties which are used to manipulate or style the text content of a web-page. 

Common Text Properties

Properties Description
color It is used to change the color of the element text content.
direction This property can set the direction of the text content.
letter-spacing It can manipulate the spacing between the letters.
word-spacing It can manipulate the spacing between the words.
text-indent It defines how much a text should be indented.
text-decoration It can underline, overline and strikethrough a text.
text-transform It can change the casing of the text.
white-space It can style the white spacing.
text-shadow This property defines the text shadow.

Text Color

color is the most common property in CSS, and generally, it is used to color the text content of an element. There are other properties in CSS associated color, such as border-color which is used to color the border of an element.

Vamware

color property can accept different types of value. For example, we can use hex code, rgb() function or direct color name to provide value to our color property.

Example

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style>
   p{
    color: green;
   }
 </style>
</head>
<body>
       <p> It's a paragraph</p>
</body>
</html>

Preview

It’s a paragraph

Text Direction

By default, the browser shows the textual content from left to right but this property can be changed using the direction property. With the help of direction property, we can specify the writing direction of the text content.

direction values

  • ltr: It set the direction from left to right
  • rtl: It set the direction of text from right to left
  • initial: It set the direction value to its default value.
  • inherit: It set the direction value according to its parent element.

Example

<html>
  <head>
  </head>
  <body>
<p style = "direction:rtl; border: 2px solid red;">It's a Paragraph
</p>
  </body>

</html

Preview

It’s a Paragraph

Space between the letter

The letter-spacing property defines the spacing between the letters. And its values can be defined using length units such as cm, em, px etc.

Example

<html>
  <head>
  </head>
  <body>
     <p style = "letter-spacing:5px ; border: 2px solid red;">
        It's a Paragraph
     </p>
  </body>
</html>

Preview

It’s a Paragraph

Space between the words

The word-spacing property is similar to letter-spacing, but it defines the spacing between two words.

Example

<html>
  <head>
  </head>
  <body>
     <p style = "word-spacing:10px ; border: 2px solid red;">
        It's a Paragraph
     </p>
  </body>
</html>

 Preview

It’s a Paragraph

Text indentation property

The CSS text-indent property defines the indentation of the text first line. It accepts values in length and % unit.

Example

<html>
  <head>
  </head>
  <body>
     <p style = "text-indent: 20% ; border: 2px solid red;">
       Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
       To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and
       then choose the elements you want from the different galleries.
         </p>
  </body>
</html>

Preview

     Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and  then choose the elements you want from the different galleries.

Align the Text

Using the text-align property we can align a text either left, right, center or justify.

align values

  • right
  • left
  • center
  • justify

Example

<html>
  <head>
  </head>
  <body>
     <p style = "text-align: center; border: 2px solid red;">
       Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in
       the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
       To make your document look professionally produced, Word provides header, footer, cover page, and text box designs
       that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and
       then choose the elements you want from the different galleries.
         </p>
  </body>
</html>

 Preview

     Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in
the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs
that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and
then choose the elements you want from the different galleries.

Decorate a text

Using the CSS text-decoration property, we can provide various styling to a text. For example, we can underline a text or stick throw it.

Example

<html>
  <head>
  </head>
  <body>
     <p style = "text-decoration:underline;">
       underline text
     </p>
     <p style = "text-decoration:line-through;">
        Stricked Text
     </p>
     <p style = "text-decoration:overline;">
        Overlined Texxt
     </p>
  </body>
</html

Change the Text case

The casing of a text can be manipulated using text-transform property. It accepts values like capitalize which capitalize the first letter of every word, uppercase which uppercase every letter and lowercase which lowercase every letter.

Example

<html>
  <head>
  </head>

  <body>
     <p style = "text-transform:capitalize;">
        Its a paragraph
     </p>

     <p style = "text-transform:uppercase;">
        Its a paragraph
     </p>

     <p style = "text-transform:lowercase;">
        Its a paragraph
     </p>

  </body>

</html>

 Preview

      Its a paragraph

      Its a paragraph

      Its a paragraph

CSS White Space

By default, the browser removes the extra white space with single white-space, but this property of browser can be manipulated using the white-space property.

Example

 <html>
  <head>
  </head>
  <body>
     <p style = "white-space:pre;">
       The browser will show this paragraph
           as is has written with all white
   spaces and line brakes
     </p>
  </body>
</html>

Preview

     The browser will show this paragraph
as is has written with all white
spaces and line brakes

Text Shadow

The text-shadow property is generally used to provide a 3D look to a text. With this property, we can add shadow to a text. It accepts four values at once horizontal length, vertical length, blur radius and color.

Syntax

text-shadow : h-shadow v-shadow blur-radius color

Example

<html>
  <head>
  </head>
   <body>
     <p style = "text-shadow: 4px 5px 3px red">
       This is a paragraph
     </p>
  </body>
</html>

Preview

This is a paragraph 

CSS text Quick Summary

  • The text content can be represented using various HTML tags.
  • The colour property defines the colour of the text.
  • The direction property defines the writing direction of a text.
  • The letter-spacing and word-spacing property define the spacing between text’s words and letters.
  • The text-indent property defines the indentation for the first line.
  • The text-align property aligns the text centre, left, right or justify.
  • The text-decoration property provides various styling to the text.
  • The text-transform property can manipulate the text casing.
  • The white-space property deals with the default behaviour of removing extra space.
  • The text-shadow property provides the text-shadow.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *