Tutorials Tonight
Follow Us

CSS TEXT


CSS provides us the ability to style the text using its text formatting properties.

Some of its text formatting properties are :

  1. CSS text color
  2. CSS text align
  3. CSS text shadow
  4. CSS text direction
  5. CSS text indent
  6. CSS text decoration
  7. CSS text transform
  8. CSS word spacing
  9. CSS letter spacing
  10. CSS white space



1).CSS Text Color

Using color property in CSS we can set the color of text of any HTML element.

Color values can be specified either by:

  • Color name - like green,blue,silver etc.
  • RGB value - like rgb(240,20,43).
  • HEX value - like #aacb00.
  • HSL value - like hsl(210,50%,60%).

h2 {
  color: red;
}

h3 {
  color: rgb(237, 10, 245);
}

h4 {
  color: #808b17;
}

p {
  color: hsl(220, 50%, 60%);
}
▶ Run the code

2).CSS Text align

text-align property in CSS is used to align text horizontally on the webpage.

Value of text-align can be left,right and center.

<p style="text-align:left">This paragraph is left aligned.</p>
<p style="text-alignt:center">This paragraph is in center.</p>
<p style="text-align:right">This paragraph is right aligned.</p>
▶ Run the code

3).CSS Text shadow

text-shadow property is used to create shadow effect on the texts.

Value of text-shadow has 4 parts of value.Example: text-shadow : 8px 5px 10px magenta;

In the value of text-shadow first part specify value of horizontal shift of text-shadow,second part specify value of vertical shift of text-shadow,third value specify blur radius and last value specify color of shadow.

<h2 style="text-shadow:8px 5px 10px magenta">This paragraph had shadow property.</h2>
▶ Run the code

4).CSS Text direction

direction property is used to set direction of text of the element.

<h4 style="direction: rtl">This paragraph right to left aligned.</h4>
▶ Run the code

5).CSS Text indent

text-indent property is used to set indentation of first line of any paragraph.

<p style="text-indent: 40px">This paragraph has an indentation of 40px. first line of this paragraph will have an indentation of 40px and other line will start from left.</p>
▶ Run the code

6).CSS Text decoration

text-decoration property is used to decorate text by creating underline,overline,line-through or none.

It is used to remove the underline from any link.

<p style="text-decoration:underline">This paragraph is underlined.</p>
<p style="text-decoration:line-through">This paragraph has a line-through.</p>
<p style="text-decoration:overline">This paragraph has an overline.</p>
<p style="text-decoration:none">This paragraph is not decorated.</p>
▶ Run the code

7).CSS Text transform

The text-transform property is used to transform the text either in uppercase or in lowercase.

Using this property one can convert uppercase into lowercase and lowercase into uppercase also the first letter of the word can be capitalised.

<p style="text-transform:capitalise">This paragraph is capitalised.</p>
<p style="text-transform:lowercase">Text of this paragraph is changed to lowercase.</p>
<p style="text-transform:uppercase">Text of this paragraph is changed to uppercase.</p>
▶ Run the code

8).CSS Word spacing

The word-spacing property is used to set the spaces between the words in an HTML document.

<p style="word-spacing:15px">This paragraph has 15px word spacing</p>
<p style="word-spacing:-5px">Text of this paragraph has -5px word spacing.</p>
▶ Run the code

9).CSS Letter spacing

The letter-spacing property is used to set the spaces between the letters in an HTML document.

<p style="letter-spacing:6px">This paragraph has 5px letter spacing</p>
<p style="letter-spacing:-2px">Text of this paragraph has -3px letter spacing.</p>
▶ Run the code

10).CSS White space

The white-space property shows how white space inside an element is handled.

p.nowrap{
    white-space:nowrap;
}
p.wrap{
    white-space:wrap;
}
p.pre{
    white-space:pre;
}
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.