In this post, we will show how to create a simple box in html using CSS and customise it by using different CSS parameters.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background:#F2F2F2;
border: 2px solid #FAFAFA;
box-shadow: 0px 0px 5px 1px #CACACA;
width: auto;
height:auto;
margin:0 auto;
margin-right:18px;
float:left;
padding:20px;
}
</style>
</head>
<body>
<div> This Text is inside box. </div>
</body>
</html>Above code will create a box with centered text as below,
In above image and looking at CSS code you can notice that, our box has,
- Background set to #F2F2F2 color
- Box border is of 2px width using color #FAFAFA
- Box has a shadow wih color #CACACA
- Box height and width set to “auto” so it will get adjusted as you change the text inside.
- Box is aligned to left of the screen, as done using “float:left”
- Added padding of 20 px (inside distance between text and border) for all 4 sides. Refer to “Difference between Margin and Padding in CSS”