Text indention [text-indent]
The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph.

 
  p {
      text-indent: 10px;
    }

Text alignment [text-align]
The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight.

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

Text decoration [text-decoration]
The property text-decoration makes it is possible to add different "decorations" or "effects" to text. Some properties are underline, overline, line-through.

 
        h1 {
		text-decoration: underline;
	}

	h2 {
		text-decoration: overline;
	}

	h3 {
		text-decoration: line-through;
	}
	

Letter space [letter-spacing]
The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width.

 
        h1 {
		letter-spacing: 8px;
	}

	p {
		letter-spacing: 5px;
	}

Text transformation [text-transform]
The text-transform property controls the capitalization of a text.

• capitalize
  Capitalizes the first letter of each word. For example: "angel mark" will be "Angel Mark".
• uppercase
  Converts all letters to uppercase. For example: "angel mark" will be "ANGEL MARK".
• lowercase
  Converts all letters to lowercase. For example: "ANGEL MARK" will be "angel mark".
• none
  No transformations - the text is presented as it appears in the HTML code.

 
        h1 {
		text-transform: uppercase;
	}

	li {
		text-transform: capitalize;
	}

Font family [font-family]
The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page.

 
    h1 {font-family: arial, verdana, sans-serif;}
    h2 {font-family: "Times New Roman", serif;}

Font style [font-style]
The property font-style defines the chosen font either in normal, italic or oblique.

 
    h2 {font-family: "Times New Roman", serif; font-style: italic;} 

Font variant [font-variant]
The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

 
    h1 {font-variant: small-caps;}
    h2 {font-variant: normal;}

Font weight [font-weight]
The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold.

 
    h1 {font-family: arial, verdana, sans-serif; font-weight: bold;} 
    h2 {font-family: arial, verdana, sans-serif; font-weight: normal;} 

Font size [font-size]
The size of a font is set by the property font-size.
There are many different units (e.g. pixels and percentages) to choose from to describe font sizes.

 
 h1 {font-size: 30px;}
 h2 {font-size: 12pt;}
 h3 {font-size: 120%;}
 p {font-size: 1em;}

Compiling [font]
Using the font short hand property it is possible to cover all the different font properties in one single property.

   
  p {
 font-style: italic;
 font-weight: bold;
 font-size: 30px;
 font-family: arial, sans-serif;
      }

The above one can be rewritten as

 
   p {
 font: italic bold 30px arial, sans-serif;
    } 

Foreground color: the 'color' property
The color property describes the foreground color of an element.
Sample code is given below copy and try it out...

 
 h1 {
  color: #990099;
 }
 h3{
  color: #999999;
 }
 p {
  color: #990099;
 }

'background-color' property
The background-color property describes the background color of elements.
Sample code is given below copy and try it out...

 
 h1 {
  background-color: #990099;
 }
 h3{
  background-color: #999999;
 }
 p {
  background-color: #990099;
 }

Background images [background-image]
The CSS property background-image is used to insert a background image.
Sample code is given below copy and try it out...

 

body {
 background-color: #FFCC66;
 background-image: url("016.jpg");
     }

Repeat background image [background-repeat]
This property describes whether background image has to repeat or not,because if given by default it will repeat horizontally.
background-repeat: repeat - image will be repeated both horizontally and vertically
background-repeat: repeat-x - image will be repeated both horizontally
background-repeat: repeat-y - image will be repeated both vertically
background-repeat: no-repeat - image will not repeat
Sample code is given below copy and try it out...

 
body {
 background-color: #FFCC66;
 background-image: url("8701.gif");
 background-repeat: repeat
 /*background-repeat: repeat-x*/
 /*background-repeat: repeat-y*/
 /*background-repeat: no-repeat*/
     }

Lock background image [background-attachment]
The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.
Background-attachment: scroll - The image scrolls with the page - unlocked
Background-attachment: fixed - The image is locked

 
body {
 background-color: #FFCC66;
 background-image: url("8701.gif");
 background-repeat: repeat
 background-attachment: fixed;
 /*background-attachment: scroll;*/
 }

Place background image [background-position]
This property will help you to change the default position of image and we can set image in a fixed position.
background-position: 3cm 3cm - The image is positioned 3 cm from the left and 3 cm down the page
background-position: 50% 25% - The image is centrally positioned and one fourth down the page
background-position: top right - The image is positioned in the top-right corner of the page

 
 body {
 background-color: #FFCC66;
 background-image: url("8701.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
      }

Compiling [background]
From the above example we saw that we used different background properties together,we can compile these properties to a single unit and develop a single line of code.
for example the above codecan be rewritten as source code gven below :

 
background: #FFCC66 url("8701.gif") no-repeat fixed right bottom;

If a property is left out, it will automatically be set to its default value.

An external style sheet is simply a text file with the extension .css. Suppose our CSS file is inside the folder named "style" and the CSS file with file name "newstyles.css".The the code to link the html with CSS is given below ..

 
<link rel="stylesheet" type="text/css" href="style/newstyles.css" />

The line of code must be inserted in the header section of the HTML code.

And if you have to give different style to different attribute you can see the sample code below..
Get the sample source code for "test.html" which is connected to an external CSS named "newstyles.css".

 
<html>
 <head>
	
		
 </head>
	 <body>
	  
My first stylish header

	  
My second stylish header

      
 My paragraph 

	 </body>
</html>

Get the sample source code for "newstyles.css".

 
    body {
	  background-color: #00FF00;
	 }
    h1 {
	  color: #990099;
	  background-color: #FC9804;
       }
    h3{
	  color: #999999;
	  background-color: #FC980F;
      }
    p {
	  color: #990099;
      }

Copy and download the sample code and try your self and you will see that each tag get applied with its respective styles.

There are three ways you can apply CSS to an HTML document.

In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style.

 
<html>
  <head>
     
  </head>
  <body style="background-color: #00FF00;">
      The background color is green

  </body>
</html>

Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>.

 
<html>
 <head>
    <title>Example</title>
      <style type="text/css">
	body {background-color: #00FF00;}
      </style>
  </head>
 <body>
    <p>The background color is green </p>
 </body>
</html>

External (link to a style sheet)

The last method is to link to an external CSS file.An external style sheet is simply a text file with the extension .css. Suppose our CSS file is inside the folder named "style" and the CSS file with file name "newstyles.css".The the code to link the html with CSS is given below ..

 
<link rel="stylesheet" type="text/css" href="style/newstyles.css" />

The line of code must be inserted in the header section of the HTML code.
Copy and download the code and try your self to learn the different 3 methods.