CSS boxes


To make HTML more stylish we use CSS.CSS considers every HTML element as box model.We can make web pages much more attractive after aplying concept of CSS box models.
    Different parts of CSS can be described as following:
  • Content-This area in CSS box consists of content of area.
  • Padding-Padding element leaves space around CSS box margin and content of CSS boxes.
  • Border-Border property in CSS encloses entire CSS box in boder.
  • Margin-Margin property in CSS leaves entire space around CSS box.CSS margin is invisible.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color:green;
width:100%;
padding:30px;
border:27px solid yellow;
margin:30px;
}
</style>
<title>
CSS BOXES
</title>
</head>
<body>
<p>Kolkata<br>
Kolkata is capital West Bengal.It is most populated city of eastern India.More than 60% of total trade of eastern India is handled by Kolkata.</p>
</body>
</html>

Output:

Kolkata
Kolkata is capital of West Bengal.It is most populated city of eastern India.More than 60% of total trade of eastern India is handled by Kolkata.

If you are viewing this output from small screen devices then this may appear in improper way.