Border : (attributes are width type color)
Type : solid , dotted , dashed , double ( width must be min 3px for double)
Example-1
<html>
<head>
<style>
.abc
{
border :3 dotted blue;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Example-2
<html>
<head>
<style>
.abc{
border-left :3 dotted blue;
border-right:3 dashed green;
border-bottom:5 double black;
border-top :1 solid black;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Padding ( Displacement from border )
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50; ( 50 % )
(padding-left , padding-right , padding-top , padding-bottom)
}
</style>
</head>
<body>
<p class="abc"> Welcome to MSS </p>
</body>
</html>
Padding : 10 10 10 10 ;
Top Right Bottom Left
For CSS Commenting
/*
-----------------
---------------- */
Margin ( Displacement form elements )
Example-1
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
.def
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
</style>
</head>
<body>
<div class="abc"> Welcome to MSS </div>
<div class="def"> Welcome to MSS </div>
</body>
</html>
Type : solid , dotted , dashed , double ( width must be min 3px for double)
Example-1
<html>
<head>
<style>
.abc
{
border :3 dotted blue;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Example-2
<html>
<head>
<style>
.abc{
border-left :3 dotted blue;
border-right:3 dashed green;
border-bottom:5 double black;
border-top :1 solid black;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Padding ( Displacement from border )
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50; ( 50 % )
(padding-left , padding-right , padding-top , padding-bottom)
}
</style>
</head>
<body>
<p class="abc"> Welcome to MSS </p>
</body>
</html>
Padding : 10 10 10 10 ;
Top Right Bottom Left
For CSS Commenting
/*
-----------------
---------------- */
Margin ( Displacement form elements )
Example-1
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
.def
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
</style>
</head>
<body>
<div class="abc"> Welcome to MSS </div>
<div class="def"> Welcome to MSS </div>
</body>
</html>
No comments:
Post a Comment