Home Up Feedback Banner Exchange Link Xchange

Text Properties

 

Home
Basic CSS Selector
Text Properties
Color Properties
Border Properties
DHTML 3D Text
Changing Cursors
CSS Menu
Creating Multi Color Links
Webmaster's Glossary
How can I Add Favicon

 

 
 

 

 

 

 

 

Google
 

 

 

Text Properties.

  Properties are the attributes and there values which can be assigned to a selector for style up an html element. There are different types of CSS attributes for example text attributes or text properties, color properties , background properties, font properties ,margin etc.

Now we will discuss about text properties in CSS. Then you will be able to format text color , align , font etc for your requirements. Text of a tag can be formatted with following properties.   

1. Text-Alignment:

    You can use this property to align the text of the selector. Values can be center , left , right or justify. Default or initial value is left.
 

Example:     


    P  { text-align:center; color:red; }
    #a { text-align:left; color:black; }
 

 

2. Text-Decoration:

This property allow us to decorate the text through one of the following five properties.

         i).  Underline

         ii).  overline

         iii).  Strike Through

         iv).  blink

         v).   None (default)

Example:


     P  { color: red; text-decoration:underline;}
    #ab { color:blue; text-decoration:overline;}
 

Default decoration for text based tags is none. But for hyperlinks the default property is underline as you can see whenever you put anchor or <a> tag in your html code then the link always displayed underline. You can get ride of this underline by putting the following code in a style sheet.   


    A:link , A:visited , A:hover { text-decoration:none;}
 

Note: If you have to apply the same property on different selectors then you can put all the selectors in a line separated by, Instead of writing the property for each selector. Just  like in example above.


3. Text-Transformation:

      Text transformation allows text to transform by one of following four properties.


       i). None  (default)
       ii). Uppercase.
      iii). Lowercase.
      iv). Capitalize. (this property capital the first character of each word).
   
   Text transform property can be applied to all elements.

Example:

   
    H1 { text-transform: uppercase;}
    H2 { text-transform: lowercase;}
    H3 { text-transform: capitalize;} 
 

 


4. Margins. 

     This property sets the margin of an element by specifying a length or a percentage. Each element can have four margins - left, right, bottom and top. These are defined by the margin-left, margin-right, margin-top, margin-bottom properties. For example: 


    P { margin-left: 10px; 
 

        If you only use P{margin:10px;} then it will consider all the margins are set to 10px;
The margins can be specified for all four sides at once with the margin shorthand. Margins can be negative, and initially margins are 0.   


    P { margin: 10px 12px 6cm 8pt; }
   

This would give P a top margin of 10 pixel, a right margin of 12 pixel, a bottom margin of 6 pixel and a left margin of 8 pixel.

Font Properties:

 Font of a selector can be formatted by some basic font properties which are explained as below.

1. Font-Family:

     With this property we can set the font family or font type of a  selector. Example is below how to do it.
   Example:           


    P { font-family: Arial; }
 

            You may specify a couple of fonts separated by comma. In case that if your preferred font is not available, your second choice is used.

   For example, font-family: 'Times new Roman', Arial.

Note that any font name containing white space must be quoted, with either single or double quotes. For example: