tutorialstonight logo
A Platform To Learn To Code

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%).

Example

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.

Example

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.

Example

Run the code

4).CSS Text direction

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

Example

Run the code

5).CSS Text indent

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

Example

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.

Example

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.

Example

Run the code

8).CSS Word spacing

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

Example

Run the code

9).CSS Letter spacing

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

Example

Run the code

10).CSS White space

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

Example

Run the code




BOX

BOX