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
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-decorationGive 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
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 - directionGive 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
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-indentGive 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
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-transformGive 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.
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