Saturday, July 7, 2012

CSS Rules

 Syntax for CSS :

               selector {property: value;}

Defining the style sheet is very easy, its rules are simple and it’s syntax contains three parts
1.       Selector : It can be defined as a pattern which is applied to the elements in HTML. The selectors definition help us group the properties that are applied to HTML element. We will discuss about selectors in later chapter.
2.       Property : It is a characteristic defined for HTML elements such as fonts, color, border, padding. The property are part of selector definition.
3.       Value :  It is the value that should be set for the HTML element.
Following is a simple of example of how styles can be define for a <p> tag.




How to apply CSS to HTML pages?


CSS can be implemented in three different ways into a html page.

1.       Embedded or Inline.
2.       Internal.
3.       External Linking.

 

1.      Embedded or Inline 

             In this type css is defined inside the html element using the attribute style. All the properties defined by the css can be applied here.

 Example :

        
       <html>
           <head>
             <title> Example of Embedded or Inline Stylesheet</title>
         <head>
       <body >
             <div style=”background-color: blue; color: red; font-size:20px;”> This is sample text for our code.</div>
   </body>
</html>

In above example the div tag contains the style tag for which the value of background color, font color and font size is set. This will result into the background of div to be blue, color of text will be red and font size will be 20 pixel.

2.      Internal


In this type the CSS is defined in <style> tag in the html page.
Following is the example :
       <html>
           <head>
             <style type=”text/css”>
                div {”background-color: blue; color: red; font-size:20px;}
           </style>
             <title> Example of Embedded or Inline Stylesheet</title>
         <head>
       <body >
             <div> This is sample text for our code.</div>
   </body>
</html>
  The output of the above example will be similar to the example in shown with inline implementation.

3.      External Stylesheet

The CSS can be written and stored in a separate file with extension .css. These files are linked with the html page which uses the styles defined in the css file.
  Following is the method to link the css files in html tag :
<link rel="stylesheet" type="text/css" href="style/sample.css" />
This is the most widely used method for applying css to any html/xhtml page.

Example :


       <html>
           <head>
<link rel="stylesheet" type="text/css" href="style/sample.css" />
             <title> Example of Embedded or Inline Stylesheet</title>
         <head>
       <body >
             <div> This is sample text for our code.</div>
   </body>
</html>

          Note: When the all the three types of CSS style-sheet are present in the html page the they will be applied in following manner :

1.      Embedded or Inline.
2.      Internal.
3.      External.