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 (Available for Professional Discussions)
1. Message on Facebook page for discussions,
2. Video lectures on Youtube
3. Email is only for Advertisement/business enquiries.