CSS

Text Manipulation in CSS (Part-7).

Written by Taj12

Text manipulation is another most important and most attractive things in CSS. By text manipulation strategy you can get a beautiful web page. Coloring text, spacing etc are the subject of text manipulation. Remember text is the heart of web page because it is the main medium to exchange information. There are seven strategies to manipulation text:

  1. line-height
  2. word-spacing
  3. letter-spacing
  4. text-indent
  5. text-align
  6. text-decoration
  7. text-transform
  8. white-space

Line-height:

The line-height property specifies space between two lines. Declaration format:

line-height: normal || px || % || em

You can declare it as only numeric value then it is automatically converted to desired unit.

 

Example:

Here is used numeric value 2 as the value of line-height property. So it is automatically converted to its parent unit. If parent unit is 10px then line-height will be 102=20px. If it is 1.5em then line-height will be 101.5=15px.

 

Word-spacing and letter:

The word-spacing property specifies the space between two words. And letter-spacing specifies the space between two letters. Declaration format:

word-spacing: normal || px || % || em.

Letter-spacing: normal || px || % || em.

You can declare these as just numeric value then these are automatically converted to desired unit like line-height property.

Example:

Here is used numeric value 1.5 as the value of word-spacing  property. So it is automatically converted to its parent unit. If parent unit is 10px then line-height will be 101.5=15px. If it is .4em then line-height will be 10.4=4px.

Same calculation is applicable for letter-spacing property. These also support negative value.

White-space:

You already notice that it is not show as you type text in a HTML tag like <p> tag. Because it seems only a space between two word and other white space or tab is eliminated. So when you need to preserve that space then you can use white-space property. Declaration format:

white-space: normal || pre || nowrap

The pre value preserves the white space, and nowrap value prevents the overflow problem. You should not use nowrap because it is harmful for entire layout of a web page.

 

Example:

 

Text-indent:

The text-indent property is used to indent the text. It may be contain negative or positive value like space control of CSS properties. Declaration format:

text-indent: normal || % || em

You should avoid the % unit for text-indent property because it is harder to control. Most commonly em unit is used for text-indent property. The calculation of unit is as like line-height property.

 

Example:

Text-align:

The text-align property specifies the alignment of text. Declaration form:

text-align:   center || justify || left || right

Value left means left hand side alignment, right means right hand side alignment, center means centering text and justify means adjustment of both left and right alignment for text-align property.

 

Example:

Text-decoration:

The text-decoration property specifies the decoration format of text. Declaration format:

text-decoration: none || line-through || blink || underline || overline

The value underline gives an underline of text, overline gives an overline of text, blink gives the lighting effect of text, line-through gives a line through middle of text. You already notice that when you use <a> tag then an underline link is appeared. Some time you need to delete this underline from linked text due to design. For this reason text-decoration is used.

 

Example:

This example eliminates the default underline effects of  <a> tag.

 

Text-transform:

The text-transform property indicates the transformation of state. Declaration format:

Text-transform: none || capital || lowercase || uppercase

The Uppercase value transforms all lowercase text to uppercase, lowercase value transforms all uppercase text to lowercase, capital value gives all text to capital form and none means nothing change of state.

 

Example:

This example transforms all lowercase text to uppercase.

All in one example (for text Manipulation):

 Output:

About the author

Taj12

1 Comment

Leave a Comment