Using Margin, Padding & Border Property In CSS

Applying CSS Margins:


Code Snippet


<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
//can be written in a single declarations as margin: 100px 50px 100px 50px; i.e.; top right bottom left.
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>
</html>

The result of the above code:





Border property:


<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Border styles:


<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style:dotted solid dashed double;}
p.two {border-style:dotted solid dashed;}
p.three {border-style:dotted solid;}
p.four {border-style:dotted;}
</style>
</head>
<body>
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
<p class="three">This is some text in a paragraph.</p>
<p class="four">This is some text in a paragraph.</p>
</body>
</html>


The result of the above code:




Guys follow the various other tutorials to catch on further in CSS coding and designing!!!