CSS Text


PropertyDescription
text-colorThe color property is used to set the color of a text.
text-alignThe text-align property is used to set the horizontal alignment of a text.
directionThe direction property is used to set the text direction.
letter-spacingThe letter-spacing property is used to add or subtract space between the letters that make up a word.
word-spacingThe word-spacing property is used to add or subtract space between the words of a sentence.
text-indentThe text-indent property is used to indent the text of a paragraph.
text-decorationThe text-decoration property is used to underline, overline, and strikethrough text.
text-transformThe text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
white-spaceThe white-space property is used to control the flow and formatting of text.
text-shadowThe text-shadow property is used to set the text shadow around a text.
Text-Pseudo-Class
  • First-letter Pseudo-class
  • The first-letter pseduo-class to specify a rule just for the first letter of an element.

  • First-line Pseudo-class
  • The first-line pseudo-class to render the first line of any paragraph differently from the rest of the paragraph.

line-heightThe line-height property specifies the line height.
unicode-bidiThe unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
vertical-alignThe vertical-align property sets the vertical alignment of an element.

Top

Text Color

The color property is used to set the color of a text.

The value of this property can either be a hex code , color name and color code.

Syntax

color:color|initial|inherit;

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      color:#338844;
      }
      
     .two{
      color:#FF6666;
      }
    </style>
    </head>
    <body>
    <b class="one" >Welcome to CSS Tutorial</b> 
    <b class="two" >CSS Text Color</b>
    </body>
   </html>
Output
   Welcome to CSS Tutorial
   CSS Text Color 

Top

Text Alignment

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

Syntax

text-align:left|right|center|justify|initial|inherit;
Type of text-alignPurpose
leftAlign the text with the left border of the containing element.
rightAlign the text with the right border of the containing element.
centerCenter the content in the middle of the containing element.
justifySpreads the width across the whole width of the containing element.

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      text-align:#left;
      }
      
      .two{
      text-align:center;
      }
      
      .three{
      text-align:right;
      }
    </style>
    </head>
    <body>
    <p class="one"> Acer </p> 
    <p class="two"> Hp </p>
    <p class="three"> Dell </p>
    </body>
   </html>
Output

Acer

Hp

Dell


Top

Text Direction

The direction property is used to set the text direction.

Syntax

text-direction:ltr|rtl|initial|inherit;
ValuePurpose
ltrThe writing direction is left-to-right. This is default
rtlThe writing direction is right-to-left
inheritThe text flows in the smae direction as its parent element

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      direction:ltr;
      }
      
     .two{
      direction:rtl;
      }
    </style>
    </head>
    <body>
    <p class="one" >Ashwani</p> 
    <p class="two" >Sachin</p>
    </body>
   </html>
Output

Ashwani

Sachin


Top

Letter Spacing

The letter-spacing property is used to add or subtract space between the letters that make up a word.

Syntax

letter-spacing:normal|length|initial|inherit;

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     b{
      letter-spacing:40px;
      }
    </style>
    </head>
    <body>
    <b>Sachin</b> 
    </body>
   </html>
Output
Sachin

Top

Word Spacing

The word-spacing property is used to add or subtract space between the words of a sentence.

Syntax

word-spacing:normal|length|initial|inherit;

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     b{
      word-spacing:40px;
      }
    </style>
    </head>
    <body>
    <b>Welcome to CSS Tutorial</b> 
    </body>
   </html>
Output
Welcome to CSS Tutroial

Top

Text Indent

The text-indent property is used to indent the text of a paragraph.

Syntax

text-indent:length|initial|inherit;

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     p{
      text-indent:40px;
      }
    </style>
    </head>
    <body>
    <p>This text will have first line indented by 1cm
and this line will remain at its actual position
this is done by CSS text-indent property.</p> 
    </body>
   </html>
Output

This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property.


Top

Text Decoration

The text-decoration property is used to underline, overline, and strikethrough text.

Syntax

text-decoration:none|underline|overline|line-through|initial|inherit;
Type of text-decoration Purpose
underline Adds a line under the content.
overline Adds a line over the top of the content.
line-through Adds line through the middle of the content.
blink Create blinking text.
inherit Inherits this property from its parent element.

Example

<!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
      .one{
      text-decoration:underline;
      }
      
      .two{
      text-decoration:overline;
      }
      
      .three{
      text-decoration:line-through;
      }
      
      .four{
      text-decoration:blink;
      }
    </style>
    </head>
    <body>
    <b class="one">UnderLine</b>  
    <b class="one">Line-through</b>
    <b class="one">Overline</b> 
    <b class="one">blink</b> 
    </body>
   </html>
Output
UnderLine 
Line-through
Overline  
blink

Top

Text Transform

The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

Syntax

text-transform:none|capitalize|uppercase|lowercase|initial|inherit;
Value Purpose
none No change should take place
capitalize The first letter of every word should be capitalized
uppercase The entire content of the element should be uppercase
lowercase The entire content of the element should be lowercase

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      text-transform:capitalize;
      }
      
     .two{
      text-transform:uppercase;
      }
      
     .three{
      text-transform:lowercase;
      }
    </style>
    </head>
    <body>
    <p class="one" >html tutorial</p> 
    <p class="two" >css tutorial</p>
    <p class="three" >JAVA SCRIPT</p>
    </body>
   </html>
Output

html tutorial

css tutorial

JAVA SCRIPT


Top

White Space

The white-space property is used to control the flow and formatting of text.

Syntax

white-space:normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
ValuePurpose
normalNormal white space collapsing rule are followed
preWhite space is preserved just as in the

 element of XHTML,but the formatting is whatever is indicated for that element
nowrapText is broken onto a new line.

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      white-space:50px;
      }
      
     .two{
      white-space:nowrap;
      }
    </style>
    </head>
    <body>
    <b class="one" >Welcome 
    to 
    Fastlearning
    </b> 
    <b class="two" >Welcome 
    to 
    CSS Tsutorial
    </b>
    </body>
   </html>

Top

Text Shadow

The text-shadow property is used to set the text shadow around a text.

Syntax

text-shadow: h-shadow v-shadow blur color|none|initial|inherit;

The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.

Value Description
h-shadow Required. The position of the horizontal shadow. Negative values are allowed
v-shadow Required. The position of the vertical shadow. Negative values are allowed
blur Optional. The blur distance
color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
none Default value. No shadow
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     b{
      text-shadow:10px 10px 5px #000000;
      }
    </style>
    </head>
    <body>
    <p>Welcome to CSS Tutroial</p> 
    </body>
   </html>
Output

Welcome to CSS Tutroial


Top

Text-Pseudo-Class

First-letter Pseudo-class
The first-letter pseduo-class to specify a rule just for the first letter of an element.The first-letter pseduo-class applied to a element.

First-line Pseudo-class
The first-line pseudo-class to render the first line of any paragraph differently from the rest of the paragraph.The name of the pseduo-class is separated from the selector for the element by a colon:

Example

  <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one:first-letter{
       font-size:50px;
      }
     .one:first-line{
      font-weight:bold;
      }
    </style>
    </head>
    <body>
    <p class="one">
    One upon a time , there was a pseduo-class that allowed you 
    tospecify a different rule for the first letter of an element's 
    content , and anthor that allowed you to specify a different rule 
    for the whole of the first line.
    </span> 
    </body>
   </html>
Output

One upon a time , there was a pseduo-class that allowed you tospecify a different rule for the first letter of an element's content , and anthor that allowed you to specify a different rule for the whole of the first line.


Top

Line Height

The line-height property specifies the line height.

Syntax

line-height: normal|number|length|initial|inherit;
Value Description
normal A normal line height. This is default
number A number that will be multiplied with the current font size to set the line height
length A fixed line height in px, pt, cm, etc.
% A line height in percent of the current font size
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      line-height:2em;
      }
     .two{
      line-height:50%;
      }
    </style>
    </head>
    <body>
    <p class="one">Welcome to CSS Tutroial</p>
    <p class="two">Welcome to HTML Tutroial</p> 
    </body>
   </html>

Top

Unicode Bidi

The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.

Syntax

unicode-bidi:normal|embed|bidi-override|intitial|inherit;
Value Description
normal Does not use an additional level of embedding. This is default
embed Creates an additional level of embedding
bidi-override Creates an additional level of embedding. Reordering depends on the direction property
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      direction:rtl;
      unicode-bidi:bidi-override;
      }
    </style>
    </head>
    <body>
    <p> Welcome to CSS Tutroial</p>
    <p class="one">Welcome to CSS Tutroial</p> 
    </body>
   </html>
Output

Welcome to CSS Tutroial

Welcome to CSS Tutroial


Top

Vertical Align

The vertical-align property sets the vertical alignment of an element.

Syntax

vertical-align:baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
Value Description
baseline Align the baseline of the element with the baseline of the parent element. This is default
length Raises or lower an element by the specified length. Negative values are allowed
% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed
sub Aligns the element as if it was subscript
super Aligns the element as if it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Example

 <!DOCTYPE html>
   <html>
    <head>
    <style type="text/css">
     .one{
      vertical-align:text-bottom;
      }
    </style>
    </head>
    <body>
    <p> Welcome to CSS Tutroial</p>
    <p class="one">Welcome to CSS Tutroial</p> 
    </body>
   </html>

Share this article on