CSS div

By: Prof. Fazal Rehman Shamil
Last modified on May 27th, 2019

How to set CSS for div?

Example:

<html>

<head>
<style>
.myclass
{
width:400px;
height:100px;
background-color:#0000FF;
}
</style>
</head>
<body>
<div class=”myclass”>
this is my class
</div>
</body>
</html>

 

Code  How it works
.myclass myclass is the class name
{ } starting and closing of myclass
width:400px; set the width of div as 400px
height:100px; set the height of div as 100px
background-color:green; set the background color of div as green

 


How to move a dive according to your own choice?

<html>
<head>
<style>
.myclass
{
width:400px;
height:100px;
background-color:#0000FF;
position:absolute;
left:300px;
bottom:200px;
top:100px;
right:300px;
}
</style>
</head>
<body>
<div class=”myclass”>
<font color=”white”>this is my class</font>
</div>
</body>
</html>
Code  How it works
position:absolute; it will set the position of the div according to developer choice. Developer can move the div to his desire position.
left: 300px; It  will set the div after 300px from left.
bottom:200px; It  will set the div after 200px from bottom.
top:100px; It  will set the div after 100px from top.
right:300px; It  will set the div after 300px from right

 

 

 

 

Prof. Fazal Rehman Shamil
Latest posts by Prof. Fazal Rehman Shamil (see all)