Tags

, ,

This post deals with all the necessary cascading style sheets attributes which are responsible for formatting text.

color

Sets the color of text

 body {color:red;} 
 h1 {color:#00ff00;} 
 p {color:rgb(0,0,255);} 

————————————–

direction

Specifies the text direction/writing direction. The same as text-align. Values ltr ( left2right) and rtl.

 div {direction:rtl;} 

————————————–

letter-spacing

Increases or decreases the space between characters in a text.

 h1 {letter-spacing:2px;} 
 h2 {letter-spacing:-3px;} 

————————————–

line-height

Sets the line height between lines of text in the paragraph.

 p.small {line-height:90%;} 
 p.big {line-height:200%;} 

————————————–

text-align

Specifies the horizontal alignment of text

 h1 {text-align:center;}
 h2 {text-align:left;}
 h3 {text-align:right;} 
 p {text-aling: justify;}

————————————–

text-decoration

Specifies the decoration added to text.

 p {text-decoration: none;} /*Defines a normal text. This is default*/ 
 p {text-decoration: underline;} /*Defines a line below the text */
 p {text-decoration: overline;} /*Defines a line above the text */
 p {text-decoration: line-through;} /*Defines a line through the text */
 p {text-decoration: blink;} /*Defines a blinking text. Doesn't work in Safari, 
 Chrome and IE.*/ 

————————————–

text-indent

Specifies the indentation of the first line in a text-block.

p {text-indent:50px;} 

————————————–

text-transform

Controls the capitalization of text.

 h1 {text-transform:uppercase;} 
 h2 {text-transform:capitalize;}
 p {text-transform:lowercase;} 

————————————–

vertical-align

Sets the vertical alignment of an element. It can have the following values:

 img {vertical-align:sub;} /*subscript*/ 

 img {vertical-align:super;} /*superscript*/ 

 img {vertical-align:top;} 
 /*The top of the element is aligned with the top 
 of the tallest element on the line*/ 

 img {vertical-align:text-top;} 
 /*The top of the element is aligned with the top 
 of the parent element's font*/ 

 img {vertical-align:middle;} 
 /*The element is placed in the middle of the parent element*/ 

 img {vertical-align:bottom;} 
 /*The bottom of the element is aligned with the lowest 
 element on the line */  img {vertical-align:text-bottom;} 
 /*The bottom of the element is aligned with the bottom 
 of the parent element's font*/ 

————————————–

white-space

Specifies how white-space inside an element is handled

div {white-space:nowrap;} 
 /*Sequences of whitespace will collapse into a single whitespace. 
 Text will never wrap to the next line. 
 The text continues on the same line until a tag is encountered*/ 
div {white-space:pre;} 
 /*Sequences of whitespace will collapse into a single whitespace. 
 Text will wrap when necessary, and on line breaks*/
div {white-space:pre-line;}
 /*Whitespace is preserved by the browser. Text will wrap when necessary, 
 and on line breaks */ 

————————————–

word-spacing

Increases or decreases the space between words in a text

 p {word-spacing:30px;} 
Advertisements