CSS text properties

CSS text propertiesCSS text properties help to customize and style the targeted text.

CSS text properties contain following values

  • Text-decoration
  • Text-indent
  • Text-transform
  • Vertical-align
  • Line-height
  • Letter-spacing
  • Word-spacing
  • color
  • text-shadow
  • White-space.

Text-decoration

Text decoration is used to underline, overline or strike the targeted text. Blink is not working, but we have mentioned in this article.

Example: text-decoration:underline;

Values:

  • underline: Underlines the targeted text
  • overline: Line appears over the targeted text
  • line-through: Strikes the targeted text. Helpful in shopping website while making discount offer.
  • blink: Blinks the text.

CSS text decoration example

Text-indent

The first line will leave specified starting space.

Example: text-indent : 60px;

Values: CSS measurement units.

CSS text-indent example

Text-transform

Used to transform the normal text to uppercase or lowercase.

Example: text-transform: capitalize;

Values:

  • capitalize: Makes capitalize the first letter of each words in the targeted sentences.
  • uppercase: Makes each targeted letter uppercase.
  • lowercase: Make each targeted letter lowercase.
  • none: No text-transform property will be applied.

text-transform

Vertical-align

Makes the targeted text vertically upward or downward.

Example: vertical-align: super;

Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, CSS measurement unites.

Live example.

Line-height

Creates the space between two lines.

Example: line-height:40px;

Values:

CSS line height example

Letter-spacing

Creates the space between letters.

Example: letter-spacing: 3px;

Values: normal, CSS measurement units.

CSS letter spacing example

Word-spacing

Creates the space between words.

Example: word-spacing: 10px;

Values: normal, CSS measurement units.

CSS word spacing example

Color.

Color property allows to give the specified color to targeted text. You can specify color in different ways.

RGB

Example: color:rgb(255,0,0);

But sometimes you may need opacity, then you can specify rgba value in which fourth parameter will be an opacity value. Opacity value can exist between 0 to 1.

Example: color:rgba(255,0,0,0.5); where opacity is 0.5.

Hex value

Hex value is denoted with “#”.  Its an 6 digit value and every digit contain a value between 0 to F. Hex value contains three parts and every part contains two digits. The first part is nothing but red value, Second part is Green value and third part specifies the blue value. All parts contain a value between 00 to FF. And color is created by mixing these values.

Example: color:#FF0000;

Color name.

You can specify the color with color names also.

Example: color:red;

Text-shadow.

Shadowing makes the text beautiful. I have applied the shadow-text property on the title of an article.

Syntax: text-shadow: horizontal_position_value vertical_position_value blur_shadow_value color_value;

Text-shadow syntax contain horizontal position value, vertical position value, blur_shadow_value and color of the shadow. Negative value is also allowed for horizontal and vertical value.

Example: text-shadow: 2px 2px  pink;

CSS text shadow example

To include blur shadow

Example text-shadow: 2px 2px 10px red;

CSS blur text shadow

Live Demo

White-space

White-space defines the space inside the element.

Values:

  • normal
  • nowrap
  • pre
  • pre-line
  • pre-wrap

Live Demo.

Comments

comments