CSS Tutorial

CSS stands for cascading style sheet. Which is used today to develop web
pages.CSS is useful to make style rule because HTML provides a limited
option for formatting CSS provide a rich amount of formatting
option.. you can implement CSS rule in many way...

• Call by class
• Call by id
• Inline style
• By HTML Tag

Call by class
In this type of CSS implementation we make a function type description like
C language. The name of rule start . in this type of rule. You can call
these rule more one time or any valid HTML tag using CLASS keywords
<style type="text/css">
        .border1
        {
            border:outset 5px red;
        }
    </style>
 <input type="button" value="Click me" class="border1" />
        <input type="text" class="border1" />
Call by ID
In this type of CSS rule we call CSS Using id of a HTML control because rule
name start with # symbol which is a ID of a HTML tag's id. This Rule call automatically when browser load
a page.

       #div
        {
            border:outset 5px red;
            background-color:Aqua;
            height:200px;
            width:200px;
        }
  <div id="div1">      
    </div>
Inline Style...
In this type of styling we apply CSS rule direct on HTML tag.It is more
appropriate for when small style  has to be apply.

<input type="button" value="click me" style="color:Red;border:solid 3px blue;background-color:Yellow" />

By HTML Tag 

  This style provide you option of override style of a HTML tag.These tags call automatically

 when we use particular HTML tag which we used in CSS Style Rule.

Implementation many style in CSS way. 

Border

border type (dashed,dotted,double,groove,inset,outset,ridge,solid,none)

.leftborder

        {
            background-color:Bisque;
            border-left:ridge 5px blue;
            height:100px;
            width:100px;
        }

<div class="leftborder">

    </div>

        .rightborder
        {
            background-color:Yellow;
            border-right:dotted 5px red;
            height:100px;
            width:100px;
          }
<div class="rightborder">
    </div>

        .bottomborder
        {
            background-color:Green;
            border-bottom:dashed 5px red;
            height:100px;
            width:200px;
        }
<div class="bottomborder">
    </div>

        .topborder
        {
            background-color:Burlywood;
            border-top:double 5px blue;
            height:100px;
            width:300px;
        }
<div class="topborder">
    </div>

         .bordetcolor
        {
            border:solid 8px red;
            height:150px;
            width:150px;
            background-color:Aqua;
            border-bottom-color:Red;
            border-left-color:Blue;
            border-right-color:Yellow;
            border-top-color:BlueViolet;
        }
<div class="bordetcolor">
    </div>

         .borderwidth
        {
            height:150px;
            width:150px;
            background-color:Aqua;
            border-style: solid;
            border-width: thin medium thick 22px;
            border-color: #0000FF
        }
 <div class="borderwidth">
    </div>

 <div  style="height:150px;width:150px; border-style: dashed outset double inset; border-width: 10px 12px 8px 6px; border-color: #00FF00 #FF0000 #0000FF #FFFF00; background-color: #C0C0C0">
    </div>
Customize a Link
    we use <a> tag for hyperlink a page default format of hyperlink is blue font size if you are visited particular page , text decoration is underline  and font color change when you visited page which you used in link but you can change its default behavior using CSS code on following line

         a:link {color:#666655;}      /* unvisited link */
        a:visited {color:#666655;}  /* visited link */
        a:hover {color:aqua;}  /* mouse over link */
        a:active {color:yellow;}  /* selected link */
        a:link{text-decoration: none} /* Hide Underline of link */
 Saving CSS in External File
   It is good practice to save css rule in another file because this way make you able to reuse css rule on many file and its also increase security of your website for eavesdropping.

<link rel="stylesheet" href="css/home.css" type="text/css" />
Different Style Rule for more than anchor tag
      a.index1:hover
     {
         color:#FFFF99;
     }
     a.index1:active
     {
         color:#00FF00;
     }
     a.index2:hover
     {
         color:#0000FF;
     }

  Making Rounded Division

 

<html>
    <head>
        <style type="text/css">
    .a {
border-radius: 10px;
background-color:white;
height:100px;
width:100px;
box-shadow: 5px 5px 5px #000;
border :solid 1px black;
}
        </style>
    </head>
<body>
    <div class="a">
        <center>
        <br>
        Place your <br>
        Content Here
        </center>
    </div>
</body>
</html>

Rounded Rectangle with Heading 

 This is div which i always want to make.but i find it very hard to implement.Then I learn border-radius and border shadow attribute and some trick which make me able to make such type of div as you are seeing in the picture.
Round and Radius attribute is not supported by the IE so be aware before use it because this div will show in rectangle form.

.round
    {
        border-radius : 10px;
        width:200px;
        background-color:#0099CC;
        box-shadow:5px 5px 5px #000;
        border:outset 1px #CCCCCC;
    }

.divheading
    {
        color:#FFFFFF;       
        font-weight:bold;
        font-size:medium;
        font-family:Arial, Helvetica, sans-serif;
        text-align:left;
    }

.divbackcolor
    {
        background-color:#FFFFFF;
    }

<div class="round"">
          <div class="divheading">
                        &nbsp;&nbsp;Divison Heading
            </div>                                                               
           <div class="divbackcolor" >
                      Implement Your code here                                                             
           </div>           
                                                               
 </div>

CSS letter-spacing Property

The letter-spacing property increases or decreases the space between characters in a text.

Set the letter spacing for h1 and h2 elements:

h1 {letter-spacing:2px}

h2 {letter-spacing:-3px}

Home