Css Text | All About Css Text and thier Example – codewithrandom

CSS provides a lot of ways to format text including changing color, indentation, adding text-decoration and a lot more.

CSS Text Color

The color CSS property sets the color of a text.

Valid Values:

• <color>

Example:

 #p1 {  
   color: red;  
 }  
 #p2 {  
   color: rgb(23, 52, 89);  
 }  

CSS Text Align

The text-align CSS property sets the horizontal alignment of a text.

Valid Values:

• left: aligns text to the left edge
• center: aligns text to the center
• right: aligns text to the right edge
• justify: aligns text its left and right edges to the left and right edges of the line box except for the last line

Example:

 #p1 {  
   text-align: left;  
 }  
 #p2 {  
   text-align: center;  
 }  
 #p3 {  
   text-align: right;   
 }  
 #p4 {  
   text-align: justify;  
 }  

CSS Text Transform

The text-transform CSS property sets the capitalization of the text.

Valid Values:

• none: prevents the case of the text from being changed
• capitalize: converts the first letter of each word to uppercase; other characters are unchanged
• uppercase: converts a text to uppercase
• lowercase: converts a text to lowercase

 #p1 {  
   text-transform: none;  
 }  
 #p2 {  
   text-transform: capitalize;  
 }  
 #p3 {  
   text-transform: uppercase;  
 }  
 #p4 {  
   text-transform: lowercase;  
 }  

CSS Text Indent

The text-indent CSS property sets the length of the indentation of a text.

Valid Values:

• <length>
• <percentage>

Example:

 #p1 {  
   text-indent: 15px;  
 }  
 #p2 {  
   text-indent: 25%;  
 }  

CSS Text Decoration

The text-decoration CSS property sets the text decoration line, color and style.

The text-decoration CSS property is actually a shorthand for text-decoration-line , text-decoration-style and text-decoration-color properties.

Note: The text-decoration-line property is required.

Valid Values:

Click the ‘Play It Yourself’ button below to play with all the values.

 #p1 {  
   text-decoration: solid dotted red;  
 }  

CSS Text Shadow

The text-shadow CSS property adds shadows to text. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

Valid Values:

• <color>: optional; sets the color of the shadow; if this is not defined the value is left up to the user-agent
• offset-x offset-y: required value; it specifies the shadow’s distance from the text; offset-x is the horizontal distance while offset-y is the vertical distance
• blur-radius: optional; defaults to 0; this is a <length> value, it defines the size of the blur/shadow

If the optional values are not present they will be set to their default values.

Example:

 #p1 {  
   /* offset-x | offset-y | blur-radius | color */  
   text-shadow: 2px 2px 3px red;   
 }  
 #p2 {  
   /* color | offset-x | offset-y | blur-radius */  
   text-shadow: #173459 1px 0 10px;   
 }  
 #p3 {  
   /* offset-x | offset-y | color */  
   text-shadow: 2px 2px rgb(128, 0, 255);  
 }  
 #p4 {  
   /* color | offset-x | offset-y */  
   text-shadow: fuchsia 2px 5px;  
 }  
 #p5 {  
   /* offset-x | offset-y */  
   text-shadow: 1px 3px;  
 }  

CSS Letter Spacing

The letter-spacing CSS property sets the length and behavior of the space between letters.

Valid Values:

• normal: sets the normal letter spacing for the current font
• <length>

Example:

 #p1 {  
   letter-spacing: normal;  
 }  
 #p2 {  
   letter-spacing: 3px;  
 }  

CSS Word Spacing

The word-spacing CSS property sets the length of the space between words.

Valid Values:

• normal: sets the normal word spacing as defined by the browser
• <length>
• <percentage>

Example:

 #p1 {  
   word-spacing: normal;  
 }  
 #p2 {  
   word-spacing: 4px;  
 }  
 #p3 {  
   word-spacing: 20%;  
 }  

CSS Line Height

The line-height property specifies the amount of space used in lines such as in text.

Valid Values:

• normal: depends on the user agent
• <number>: the value is multiplied by the element’s current font size; this is the preferred way to set line-height
• <length>
• <percentage>

Example:

 div {  
   line-height: 3px;  
 }  

CSS White Space

The white-space CSS property sets how the white space is handled inside an element.

Valid Values:

• normal: Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
• nowrap: Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
• pre: Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
• pre-wrap: Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
• pre-line: Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Example:

 #p1 {  
   white-space: normal;  
 }  
 #p2 {  
   white-space: nowrap;  
 }  
 #p3 {  
   white-space: pre;  
 }  
 #p4 {  
   white-space: pre-wrap;  
 }  
 #p5 {  
   white-space: pre-line;  
 }  

CSS Text Direction

The direction CSS property sets the direction of a text (and more).

Valid Values:

• ltr : sets text and other elements go from left to right
• rtl : sets text and other elements go from right to left

Example:

 #ltr {  
   direction: ltr;  
 }  
 #rtl {  
   direction: rtl;  
 }