Styles With DIV Id And Class Styles: If the elements have common attributes the you can put that attributes in “class” where as if the elements have Unique attributes the you can put that attributes in “Id”
Example for class & ID
<html>
<head>
<style>
.abc{
width :150;
height :150;
background :green;
border :1 solid black;
}
#d1 {
position:absolute;
top :0;
left :0;
}
#d2 {
position:absolute;
top :0;
left :150;
}
#d3 {
position:absolute;
top :150;
left :0;
}
#d4 {
position:absolute;
top :150;
left :150;
}
</style>
</head>
<body>
<div id="d1" class="abc"> div1 </div>
<div id="d2" class="abc"> div2 </div>
<div id="d3" class="abc"> div3 </div>
<div id="d4" class="abc"> div4 </div>
</body>
</html>
Example for <div>
<html>
<head>
<style>
.abc{
width :200;
height :30;
background :black;
border-left :1 solid black;
border-top :1 solid black;
border-right:1 solid black;
position :absolute;
top :100;
left :200;
z-index :10;
}
.def{
width :400;
height :300;
background :black;
border :1 solid black;
position :absolute;
top :130;
left :100;
z-index :0;
}
</style>
</head>
<body>
<div class="abc"> div1 </div>
<div class="def"> div2 </div>
</body>
</html>
Example for class & ID
<html>
<head>
<style>
.abc{
width :150;
height :150;
background :green;
border :1 solid black;
}
#d1 {
position:absolute;
top :0;
left :0;
}
#d2 {
position:absolute;
top :0;
left :150;
}
#d3 {
position:absolute;
top :150;
left :0;
}
#d4 {
position:absolute;
top :150;
left :150;
}
</style>
</head>
<body>
<div id="d1" class="abc"> div1 </div>
<div id="d2" class="abc"> div2 </div>
<div id="d3" class="abc"> div3 </div>
<div id="d4" class="abc"> div4 </div>
</body>
</html>
Example for <div>
<html>
<head>
<style>
.abc{
width :200;
height :30;
background :black;
border-left :1 solid black;
border-top :1 solid black;
border-right:1 solid black;
position :absolute;
top :100;
left :200;
z-index :10;
}
.def{
width :400;
height :300;
background :black;
border :1 solid black;
position :absolute;
top :130;
left :100;
z-index :0;
}
</style>
</head>
<body>
<div class="abc"> div1 </div>
<div class="def"> div2 </div>
</body>
</html>
No comments:
Post a Comment