css text

css text properties affect the visual presentation of character,spaces,words,and paragraphs.

look the css text properties.

  • text-align
  • text-transform
  • text-decoration
  • text-indent
  • text-shadow
  • direction

Css text-alignment

text can be aligned left ,right ,center,and justify. using the css text-align property is used to align the text of a document.

                                set  text-align property  of an html element         
  <html>
  
         <head>
         
         <style  type="text/css"  >
         
           p.center{ text-align:center;}  h1{ text-align:right;}
                     
           h2{ text-align:left;}  p.justify{ text-align:justify;}
        
    </style> </head>
    
     <body> <div>
     
<p class="center">you can use the text-align property to align 

      blocks of  text in four basic ways</p>
         
<h1>this is first level heading see  the text-align propertys effect </h1>
         
<p class="justify">this is paragraph  show the effect of the justification settings.</p>
         
<h2>this is  second level heading see text-align effect </h2>
               
</div> 
         
  </body> </html>

Css text color

the css color property is used to defines text color.the css color set with any three value formats.

  • hax value = "#ffa2bb".
  • color name = "blue".
  • color value= rgb(200,120,130).
           <style  type="text/css"  >
           
                     p{color:#3a5b9c;}
            
                     h2{color:rgb(222,32,123);}
           
           </style>

Css text-transform

the text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

                            text-transform property
         <html>
         
         <head>
         
         <style  type="text/css"  >
         
         p.uppercase{ text-transform:uppercase;}  h1{ text-transform:lowercase;}
                     
         p.capitalize{ text-transform:capitalize;}
         
   </style> </head>
   
         <body> <div>
         
 <p class="uppercase">how use the text-transform property with the p tag</p>
         
 <h1>look the text-transform property effect on the html heading tag</h1>
         
 <p class="capitalize"> nice work with the text-transform property effect</p>
         
</div> </body> </html>

Css text-decoration

the Css text-decoration property is used to underline ,overline,strikethrough text.

the Css text-decoration property can be used to decorate text.

                             text-decoration property
         <html>
         
         <head>
         
         <style  type="text/css"  >
         
  p.underline{ text-decoration:underline;} h1{ text-decoration:line-through;}
                  
  p.overline{ text-decoration:overline;}   h2{ text-decoration:blink;}
                  
   </style> </head>
   
         <body> <div>
         
<p class="underline">using text-decoration property set underline on p tag </p>
         
<h1>this is first level heading see  the text-decoration  property effect</h1>
         
<h2>this is second  level heading see  the text-decoration property effect</h2>
         
<p class="overline">this is paragraph  show the effect of the justification settings. </p>
         
         </div> </body>
         
 </html>

Css text-shadow

the css text-shadow property is used to set the text shadow around a text.

                                     text-shadow property
         <html>
         
          <head>
          
         <style  type="text/css"  >
         
             p.shadow{ text-shadow:1px  4px  1px red;}
             
             h1{ text-shadow:1px 20px 2px green;}
                    
     </style> </head>
     
         <body> <div>
         
<p class="shadow">the css provide a best text-shadow property which used to 

          design the text</p>
          
          <h1>text-shadow property is more usefull property for text </h1>
          
 </div> </body> </html>

Css text-indent

this Css property specifies the indentation of the first line of text in a block container.

text-indent only affects a line if it is the first formatted line of an element.

user agents must render this indentation as blank space.

             <html>
             
             <head>
             
             <style  type="text/css">
             
             p{text-indent:100px;text-transform:capitalize;
                 
                 border:10px outset #3a4b9c;background-color:#3a4b9c;
                 
                 width:400px;height:150px;
                 
                 color::white;
                 }
                 
              </style>    
             
             <body>
             
<p>the text-indent property specifies the indentation of the first line of text
             
  in block container more precisely ,it specifies the indentation of the first box
              
that flows into the blocks first line box .the box  is indented with respect to the 

left(or right ,for right to left layout)edge of the line box user agent must render 

this indentiation  as a blank space.</p>

     </body></html>

all css text property.

propertydescription
color  sets the color of text
text-align  specifies the horizontal alignment of text
text-decoration  specifies decoration to text
text-transform  specifies the capitalization of text
text-indent  specifies the indentation of the first line in a block container.
text-shadow  shadow effect to text
vertical-align  specifies the vertical align of text
letter-spacing  controls the space between characters in a text
word-spacing  controls the space between words in a text
white-space  controls the white-space
direction  specifies the text direction.
line-height  sets the line height.
unicode-bidi