CSS

In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.


There are three types of CSS....

These are....

1.Embedded Style

Example-

2.Inline Style

Example-

3.External Style sheet

Example-

CSS has mainly two parts, these are....
1.Selector
2.Declaration
The selectors are of two types.These are,
* ID selector (Defined by symbol "#" )
* CLASS selector (Defined by symbol ".")
The Declaration has two parts.These are,
* Properties
Like-
    font-family:
    color:
* Values
Like-
    arial
    red

CSS Menu:---
Below is a simple CSS dropdown menu example-
Just type the code below in the body section.



























Just copy and paste in the head section within the embedded style sheet.

body{
margin:0px;
padding:0px;
}
#left{
width:200px;
height:auto;
float:left;
}
#left ul{
width:150px;
height:auto;
margin:0px;
margin-left:24px;
border:1px #CCCCCC solid;
padding:0px;
position:relative;
padding:5px 0px 5px 0px;
background-color:#EEEEEE;
list-style-type:none;
float:left;
}
#left li{
width:150px;
height:20px;
float:left;
}
#left li a:link,#left li a:visited{
width:140px;
height:20px;
display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
padding-left:10px;
line-height:20px;
border-bottom:1px #CCCCCC solid;
color:#333333;
text-decoration:none;
outline:none;
float:left;
}
#left li a:hover{
background-color:#FFFFCC;
}
#left li:hover ul{
display:block;
}
#left li li:hover ul{
display:block;
visibility:visible;
}
#left li ul{
width:150px;
height:auto;
margin:0px;
padding:0px;
position:absolute;
left:150px;
display:none;
list-style-type:none;
float:left;
}
#left li li ul{
width:150px;
height:auto;
margin:0px;
padding:0px;
display:none;
visibility:hidden;
left:150px;
list-style-type:none;
float:left;
}
Seting Page:-----
body{
margin:0px;
padding:0px;
}
Margin Properties:-----
#DIV{
width:500px;
height:auto;
margin:10px 0px 0px 10px; (Top Right Bottom Left)
float:left;
}
Padding Properties:-----
#DIV{
width:500px;
height:auto;
padding:10px 0px 0px 10px; (Top Right Bottom Left)
float:left;
}
Background Properties:-----
#test{
background:#FF0000;
background-attachment:scroll; /*(Default value scroll) Other values are-fixed,inherit */
background-image:url(images/poster_1.jpg); /*(Must be your Image)*/
background-repeat:repeat; /*(Default value repeat) Other values are-inherit,no-repeat,repeat-X,repeat-Y */
background-position:left; /*(Default value left) Other values are-bottom,center,inherit,right,top */
}