Search within TutorialsPark

CSS Text Decoration


Use CSS to apply decorative styles to text blocks


CSS Text: Inline, Overline and line-through

If there is anything that a man can do well, I say let him do it. Give him a chance. - Abraham Lincoln

text-decoration:

1. The entire text blocks can be decorated using CSS text property of text-decoration with effects such as underline, overline, , line-through etc.

2. The value for text-decoration is as follows:

underline Underlines the text

overline Lines passes over the text

line-through The line passes through the centre of the text

none Removes all underline effects

inherit The child element inherits underline value from the parent element

Example: CSS Text - text-decoration

Give it a TRY! » Note: CSS3 specifications removed the annoying blink value for text-decoration


CSS Text Decoration: Setting the Direction of Text

A person should not be too honest. Straight trees are cut first and honest people are screwed first. -chanakya

direction:

1. The direction of the block of text can be controlled using CSS property of direction

2. The value of direction can be both ltr(left to right) or rtl(right to left).

3. With the value as inherit the child elements inherit direction from the parent element.

Example: CSS Text - direction

Give it a TRY! » Note: Latest CSS specifications may have removed the direction property.


CSS Indents: To Indent the first line

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. - Steve Jobs

text-indent:

1. You can indent the first line(first word is shifted several spaces) of the text block using CSS property of text-indent

2. The value of text-indent can be specfied in terms of percentage(%), pixel(px) or em .

3. The value can be both positive as well as negative, the negative value would create a Hanging Indent

Example:CSS Decoration text-indent

Give it a TRY! » Note: Text Indent is used more often on Print pages than on online Text .


CSS Text Transform: UpperCase and LowerCase

Hell has three gates: lust, anger, and greed - Bhagavad Gita

text-transform:

1. The text-tranform property enables you to convert text to intial Caps, uppercase or lowercase.

2. The value for text-transform can be any of the following:

capitalize : The first letter of every character after space is converted to upperspace

lowercase: All the characters are converted to lowercase.

uppercase : All the characters are converted to uppercase.

none: No conversion and all inherited values are removed.

Example: CSS Text Decoration text-transform

Give it a TRY! » Note: Use this property to make sweeping changes to text blocks


CSS Text: White Spacing and Line Wrapping

Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.

font-size:

1. Normally, more than one white-spaces are collapsed on a HTML document. Even the line-breaks are ignored and the text is wrapped at right places to fit within the area of an element.

2. But with CSS property of whitespace you can preserve the formatting of text by having white-space and line breaks as per your design demands

3. The whitespace property can have any of the four values:

normal : Removes all inherited values, its the default

pre : Preserves all the spaces and new lines

nowrap : Prevents browser from automatically wrapping the text.

pre-line : Whitespaces are collapsed and text wraps to make line fit or when a line break is encountered.

pre-wrap : Whitespaces are preserved and text wraps to make line fit or when a line break is encountered

Example: CSS Text whitespace

Give it a TRY! » Note:Do not confuse <pre> and <nobr> with white-space property.