CSS Text

      No Comments on CSS Text

CSS text formatting defines various properties to apply style to text.

CSS Text Color

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

With CSS, a color is most often specified by:

  • a color name – like “red”
  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”

Try it yourself:

I am red colored text
I am #333399 colored text

<span style="color:red;">I am red colored text</span><br>
<span style="color:#333399;">I am #333399 colored text</span><br>

Text alignment

text-align property is used to set horizontal alignment of the text. Values supported are: left, right,justify, center.
{text-align:value}

Text decoration

text-decoration property is used to decorate text.
text-decoration:none; is used to remove underlines from lines. Others are used to decorate text. Values suported are:underline, overline,none, line-through

Try it yourself

Overlined

Line through

<span style="text-decoration:overline;">Overlined</span>
<span style="text-decoration:line-through;">Line through</span>

Text tranformation

text-transform property is used to transform text to uppercase or lowercase.
Try it yourself

uppercase

LOWERCASE

<span style="text-transform:uppercase;">uppercase</span>
<span style="text-transform:lowercase;">LOWERCASE</span>

Text spacing:

Letter spacing

letter-spacing property specifies space between the characters in the text.

Normal text

Spaced text

<span>Normal text</span>
<span style="letter-spacing:10px;">Spaced text</span>

Line height

line-height specifies space between the lines.Default is 100%.

Normal text
Normal text


Spaced text
Spaced text

<span>Normal text<br>Normal text</span>
<span style="line-height:220%">Spaced text<br>Spaced text</span>

Word spacing

The word-spacing property is used to specify the space between the words .

Normal text
Normal text


Spaced text
Spaced text

<span>Normal text<br>Normal text</span>
<span style="word-spacing:20px" >Spaced text<br>Spaced text</span>

Text indentation

The text-indent property is used to specify the indentation of the first line of a text (text shifts from normal margins):
Try it yourself

Indented by 50px

Indented by 10%

<span style="text-indent:50px;">Indented by 50px</span>
<span style="text-indent:10%;">Indented by 10%</span>

Text direction

The direction property is used to change the text direction of an element(left to right or right to left):

Try it yourself

<span>Normal text direction</span>
<span style="direction: rtl;">Right to left text direction</span>

Leave a Reply

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