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. 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 generally provides 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

    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.