CSS Margin Padding and CSS Border Style

0 187

CSS Margin Padding CSS Border Style Border Color Border Width CSS Outlines

in this tutorial, we will briefly discuss on CSS Margin Padding CSS Border Style Border Color Border Width CSS Outlines

CSS Padding

To add a specific amount of space between the border of an element and its contents padding property is used.in other word padding property will define space inside table or border.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS Padding example</title>

<style>
body {
background-color:green; 
}
.one{
padding:100px;
color:white;
}
p{
color:white; 
}
</style> 

</head>
<body>

<p>this pragraph is without applying Padding</p>
<p class="one">Proin ac ante lorem. Quisque sollicitudin nisl turpis, vitae molestie augue pretium ut. Vestibulum congue sapien urna, et ornare metus varius sed. Nulla ac feugiat ligula. Ut vel tortor tincidunt, auctor est ornare, finibus eros. Sed lacus leo, interdum at arcu vel, consectetur viverra sapien. Mauris nec mollis lacus. Sed id faucibus ante, id malesuada nisl. Proin vestibulum augue sed risus pharetra semper. Sed nisi lacus, condimentum vitae pulvinar ac, congue sed dui.</p>

</body>
</html>

Margin

To add a white space around an element, on the outside of the element margin property used.in other word we can say margin property will define space outside table or border.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS margin example</title>

<style>
body {
background-color:green; 
}
p{
color:white; 
}
.one {
margin:100px;
color:white;
}
</style> 

</head>
<body>

<p>this pragraph is without applying margin</p>
<p class="one">Ut vitae tristique orci. Aliquam quis luctus odio. Nam maximus ipsum ultrices sem aliquam, at ultrices ante suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nisl pellentesque, tincidunt sapien ac, viverra sapien. Aenean rutrum aliquet massa, et finibus libero ultrices eu. Nullam vel turpis et mauris convallis facilisis. Maecenas non nisi quis odio sodales molestie nec sed est. Vestibulum ac fermentum lorem.</p>

</body>
</html>

CSS Border Style

Border Style

Borders are rectangular outlines that surround an element. Through CSS we can add the border to anything in a web page .Border property in CSS specifies the color width height position.

Border style properties are.

border-style properties Description
border-left-style This property will set left side border of the element.
border-right-style This property will set right side border of the element.
border-top-style This property will set border top of the element.
border-bottom-style This property will set the bottom border of the element.
<!DOCTYPEhtml>
<html>
<head>
<title>CSS border-style properties</title>

<style> 

div{
border-left-style:dashed;
border-right-style:dotted;
border-top-style:double;
border-bottom-style:groove;
}

</style>
</head>
<body>

<div> <p style="padding:10px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div> 

</body>
</html>

Values of border-style properties are.

Value Description
dashed dashed value specify dashed border.
dotted dotted value specify dotted border.
double double value will define two borders.
groove groove value specify 3D grooved border.
inset inset value specify 3D inset border.
outset outset value specify 3D outset border.
ridge ridge value specify ridge border.
solid solid value specify solid border.
<!DOCTYPEhtml>
<html>
<head>
<title>CSS values of border-style properties</title>

<style> 

div{
border-left-style:dashed;
border-right-style:dotted;
border-top-style:double;
border-bottom-style:groove;
}

</style>
</head>
<body>

<div> <p style="padding:10px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div> 

</body>
</html>

Border Color

There are four types color properties in CSS that you can apply to your border right left top and bottom.

Border Color properties are.

The property Description
border-bottom-color border-bottom-color will specify a color to the bottom border.
border-left-color border-left-color will specify color to left border.
border-right-color border-right-color will specify color to right border.
border-top-color border-top-color will specify a color to the top border.
<!DOCTYPEhtml>
<html>
<head>
<title>CSS color properties</title>

<style> 

div{
border:1px solid;
border-bottom-color:red;
border-top-color:pink;
border-right-color:blue;
border-left-color:yellow;
}

</style>
</head>
<body>

<div> <p style="padding:10px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div> 

</body>
</html>

 

Border color property has different color values to apply the different shade of color to the border.

Value Description
color color value specify to apply color to the border RGB or hexadecimal value or color name.
transparent a transparent value used to make a border transparent

Border Width

The border-width allow you to define a width of any right left top or bottom border in CSS.

The property Description
border-bottom-width the border-bottom-width property will specify a width of the bottom border.
border-left-width border-left-width property will specify width of left border.
border-right-width border-right-width property will specify width of right border.
border-top-width border-top-width property will specify width of top border.

Values of Border Width are

Value Description
medium this will specify medium border.
length used in accepting an explicit value that specifies the thickness of the border.
thick thick value used to display thick border.
thin thin value used to display thin border.
<!DOCTYPEhtml>
<html>
<head>
<title>CSS Border Width and values</title>

<style> 

div{
border:1px solid;
border-bottom-width:thick;
border-left-width:medium;
border-right-width:thin;
border-top-width:medium;
}

</style>
</head>
<body>

<div> <p style="padding:10px">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div> 

</body>
</html>

CSS Outlines

CSS outline is a line drawn in style, color, and width of an outline the element to make the element stand out, the outline property defines.

Comments

comments

Leave A Reply

Your email address will not be published.