Website Design- All assignments - Raad Begh: Unit 20 - P2 Explain the features of the box model for CSS

P2 - Explain the features of the box model for CSS

This blog will give you an explanation in detail of the features within a box model for CSS (Cascading Style Sheet), for example the margin, padding, border and content area. I will also provide you will illustrations to give you an idea of what it looks like on screen.

Within CSS, there are several different elements that are used to display things on a web page which are either box's and contain. The elements consist of Margins; the one around everything which keeps space between the border and the browser and next box within the screen), the Border; the one that stays around the outside of the padding and the content, Padding; the one keeps a space around the element/content and the content in the centre of all these which includes the element. Below is an example of this:

Margin:

The margin is a transparent box around the border of the content, this means that it would not effect any background colours behind the content and margin. The margin clears a specific area that has been coded with the size's of the space around the element. The margin is in between the browser and the border and gives the content enough space from the edge of the web page's. Margins are usually measured as pixels, also known as px for example margin:25px. The top, right, bottom and left margins can always be changed, however they must be changed independently using separate properties.

For example:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Border:

The border is includes several different values that can be used to design the element. The border is used to make the content stand out a bit more. You can edit the border-thickness, border-style and the border-colour. The border thickness can be made as bold or as thin are the user wants it to be. You can also put the size of the distance you want it to have from the padding box. There are different styles of the border that could used e.g. dotted, dashed or solid. The colour of the border could also be changed to any/most colour you want, from white (#000000) to black (#FFFFFF).

For example:

{
border-style:dashed;
border-colour:#98bf21;

border-width:5px;
}

Padding:

The padding gives space in between the content (which is in the centre) and border but inside the border. The borders top, right, bottom and left can have padding changed independently using separate properties. The padding colour around the content can be changed and also different for each side, top and bottom using separate properties. However the padding around the content is affected when the background colour of the box is changed.

For example:

padding-top:25px;

padding-bottom:25px;
padding-right:50px;
padding-left:50px;

ID:

ID selectors allow you to set the style format of your elements within your web page. They are used for specific styles for one unique element and are known by using a hast tag (#). ID selectors are a unique identifier to an element and they define a special case for a specific element within the web page.

Below is an example of a ID Selector:

#para1
{
text-align:center;
color:red;
}

Class:

Class Selectors allow you to set a specific type of style for several different HTML elements which have the same class and this type of selector is also used to identify a group of several different elements. An example would be; using classes when wanting to have the same style of one paragraphs for all of your paragraphs in your web page. The Class selectors are known by using a dot (.) before the code. If there is this type of selector in any HTML elements they will be centre-aligned.

Below is an example of a Class Selector:

.center {text-align:center;}

The difference between both selectors are that ID selectors can only be used when trying to identify one element, however Class elements can be used to identify several different elements with in a web page.

CSS backgrounds:

CSS allows the user to set the background colour and/or an image on their web page. When designing your CSS background, you have the opportunity to choose how you want it to be displayed, so you have control over the background. Whether it is in a fixed position or scrolls down the page when the user scrolls down, its up to you to decide how you would like the format. The background properties can also be used to define the background effects of a specific element.

Some images should be repeated only horizontally or vertically, or they will look strange. The background image repeats an image horizontally and vertically and some images within the web page should be either of these two as the images may come out strange. The back ground image is set as default.

CSS properties used for background effects: