P2: Explain The Features of The Box Model For CSS

P2: Explain The Features of The Box Model For CSS 

The CSS box model describes the boxes that are made in the content of a web page. Every element in the web page is in a box or is a box, even if it is an image. The boxes on the web pages are constrained by rules which are given by the box model

There are four parts of the box model which are shown below.

1.       Margin

2.       Border

3.       Padding

4.       Content

The four parts of the box model are explained in more detail below:

Margin:  the margin is the area around the border. The margin does not have a background, it is completely transparent.

Border: The border is the next thing surrounding the box and is below the margin. Borders can be coloured or transparent. If the border format is set to 0 then it disappears and the border will be the same as the padding edge

Padding: The padding is the space between the content and the border. Padding is tghe same colour as the background colour of the box. If the padding format is set to 0 then the padding border will be the same as the content border

Content: The content is the last part of the box model and this is where the text or an image is displayed.

You can edit different parts of the box model with the CSS properties such as:

• Margin
•  Border
• Padding
• Width
• Height

The border of the box model can be edited with CSS and some examples of this is shown below:

Border width: You can edit this to made the width thick or thin and you can choose how thick or think you want it with the code ‘border-width:1;’

Border style: you can edit this by choosing a variety of patterns for the box such as dotted, dashed, inset, outset, solid, etc. This can be shown in CSS like ‘border-style:dotted;’

Border color: you can edit this by choosing any color such as aqua, blue, etc. This can be shown as ‘border-color:#Blue;’

The width and the height can be changed to how big you want the box to be. The coding for this would be ‘width:100%; and for height it would be the same but the width would be changed to height ‘height:100%;

Padding: the padding helps you choose where you want the position to be of the box. An example of this could be: ‘padding:50px; or ‘padding: top right;

The last thing that could be edited is the margin. The margin is slightly the same as the padding but the coding is changed for example ‘margin:all; or margin:25px;’

All of this can done by div tags. A div tag defines a section in a HTML document, this is used to group elements to make them format with CSS. Div tags help make a page that is easy to manage and change later when needed. An example of a div tag being used in a html file and a style sheet are shown below:

HTML

<div class="a">Raja Kang</div>

 

In a Style Sheet:

.a{

background:pink;

color:green;

width:50px;

height:50px

text-align: center;

float:right;

}

 

Bibliography

http://www.w3schools.com/css/css_boxmodel.asp

http://www.css-101.org/the_box_model.php

http://webdesign.about.com/od/beginningcss/p/aacss6box.htm

http://www.w3schools.com/tags/tag_div.asp

http://webdesign.about.com/od/htmltags/qt/tipdivtag.htm