CSS most used and basic properties

CSS Background –

Background-color , background-image , Background-repeat , Background-position
Examples -
Div { background-color:#b0c4de; }
Body { background-image:url('paper.gif'); background-repeat:repeat-x; background-position:right top;}
body {background:#ffffff url('img_tree.png') no-repeat right top;}

Text Color –
h1 {color:#00ff00;}

Text Alignment –
h1 {text-align:center;} , h1 {text-align:right;} , h1 {text-align:justify;}

Text Decoration –
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} ,
h3 {text-decoration:underline;}

Properties –
p{font-family:"Times New Roman", Times, serif;}
p.normal {font-style:normal;} , p.italic {font-style:italic;}
h1 {font-size:40px;}
p.normal {font-weight:normal;} , p.thick {font-weight:bold;}

Styling Links –
a:link {color:#FF0000;} /* unvisited link */
a:hover {color:#FF00FF;} /* mouse over link */

The CSS border properties allow you to specify the style and color of an element’s border.
border-style values:

dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border

Example –
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

H2 { border :2px solid red; }

CSS Margin-

Margin property defines the space around elements.

Margin – Shorthand property
Margin: 25px 50px 75px 100px

CSS padding – The CSS padding properties define the space between the element border and the element content.

Example –
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Shorthand property-
Padding:25px 25px 50px 50px; (top, right, bottom , left)

Display Property-

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

Hiding an Element – display:none or visibility:hidden

Syntax – h1.hidden {visibility:hidden;}

Syntax – h1.hidden {display:none;}

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
Example –
img{float:right;}

Floating Elements Next to Each Other :
If you place several floating elements after each other, they will float next to each other if there is room.
Lets see an example for this :

The CSS positioning properties allow you to position an element.
Relatively Positioned Elements – A relative positioned element is positioned relative to its normal position.
.box2 { position: relative;top: 20px; left: 20px;}

Absolute Positioning – Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.

.box2
{
position:absolute;
left:10px;
top:100px;
}


Z-index – Z-index attribute is used adjust the stack order of any element. For example, if 2 elements are overlapping each other and you want to show first one over 2nd element then you need to set z-index higher for 1st element. Higher z-index element will show over lower z-index element.
Default value of z-index : 0