We now have a youtube channel. Subscribe!

Css Text


Hello guys! morning and welcome to another episode of my tutorial on Cascading Style Sheets. In my last tutorial i talked about Css Fonts and am believing that right now you guys have full knowledge of it. In this tutorial i will be talking about Cascading Style Sheets Text and it's properties.

This section of my tutorial on CSS teaches you how to manipulate text using CSS properties. You can set the following text properties of an element:

  • The color property is used to set the color of the text.
  • The direction property is used to set the direction of the text.
  • The letter-spacing property is used to add or subtract space between the letters that make up a word.
  • The word-spacing property is used to add or subtract space between the words of a sentence.
  • The text-indent property is used to indent the text of a paragraph.
  • The text-align property is used to align the text of a document.
  • The text-decoration property is used to underline, overline and strikethrough a text.
  • The text-transform property is used for converting text to uppercase or the lowercase letters.
  • The white-space property is used to control the flow and formatting of a text.
  • The text-shadow property is used to set the text shadow around the text.

Set the Text Color

The following example below shows how to set the text color. Possible values could be any color name in any valid format.

<html>
     <head>
     </head>

     <body>
            <p  style="color: green;">
                  This text will be displayed in green color.
            </p>
     </body>
</html>

RECOMMENDED: Css introduction

Set the Text Direction

The following example shows how to set the direction of a text in a Html document. Possible values are ltr or rtl.

<html>
     </head>
     </head>

     <body>
            <p  style="direction: ltr;">
                  This text will be rendered from left to right.
            </p>
     </body>
</html>

Set the Space between Characters

The following example shows how to set space between characters. Possible values are normal or a number specifying space.

<html>
     <head>
     </head>

     <body>
            <p  style="letter-spacing: 3px;">
                  This text is having 3px space between letters.
.           </p>
     </body>
</html>

Set the Space between Words

The following example shows how to set space between words. Possible values are normal or a number specifying space.

<html>
     <head>
     </head>

     <body>
                  <p  style="word-spacing: 3px;" 
                  This text is having 3px space between words.
                  </p>
     </body>
</html  


Set the Text Indent

The following example shows how to indent the first line of a paragraph. Possible values are % or a number specifying the indent space.

<html>
     <head>
     </head>

     <body>
            <p  style="text-indent: 2cm;">
                  This text will have first line indented by 2cm. and this     
                  line will remain at it's actual position.
            </p>
     </body>
</html>

Set the Text Alignment

The following example shows how to align a text. Possible values are left, right, center and justify. 

<html>
     <head>
     </head>

     <body>
            <p  style="text-align: right;">
                  This text will be aligned right.
            </p>


            <p  style="text-align: left;">
                  This text will be aligned left.
            </p>


            <p  style="text-align: center;">
                  This text will be aligned center.
            </p>
     </body>
</html>

Decorating the Text

The following example shows how to decorate a text. Possible values are none, underline, overline, line-through and blink. 

<html>
     <head>
     </head>

     <body>
            <p  style="text-decoration: overline;">
                  This text will have an over line.
            </p>


            <p  style="text-decoration: underline;">
                  This text will have an under line.
            </p>


            <p  style="text-decoration: line-through;">
                  This text will be striked through.
            </p>
     </body>
</html>

RECOMMENDED POST: Html Backgrounds

Set the Text Cases

The following example shows how to set the case for a text. Possible values are none, capitalize, uppercase and lowercase.

<html>
     <head>
     </head>

     <body>
            <p  style="text-transform: capitalize;">
                  This text will be capitalized.
            </p>


            <p  style="text-transform: uppercase;">
                  This text will be rendered in uppercase.
            </p>


            <p  style="text-transform: lowercase;">
                  This text will be rendered in lowercase.
            </p>
     </body>
</html>

Set the White Space between Text

The following example shows how to set a white space between texts. Possibles are normal, pre and no wrap.

<html>
     <head>
     </head>

     <body>
            <p  style="white-space: pre;">
                  This text has a line break and the white space pre setting   
                  tells the browser to honor it just like the HTML pre tag.
            </p>
     </body>
</html>

Set the Text Shadow
The following below shows how to set the shadow around a text. Note that this may not be supported by all browsers.

<html>
     <head>
     </head>

     <body>
            <p  style="text-shadow: 4px 4px 8px green;"> 
                  If your browser supports the CSS text-shadow property, this text will have a green shadow.   
            </p>
     </body>
</html>

Alright guys that's it for this tutorial on CSS, thanks for joining us on this tutorial. Feel free to drop your questions on the comment box below, they will be attented to as soon as possible, thanks and bye for now. 

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain