THE CSS BOX MODEL
In CSS, the term box model is used when talking about design and layout of the HTML webpage, this consists of margin, padding, border and content. The CSS box model is fundamentally a box that forms around HTML elements, which allows you to display content on your website. The box model is a set of standards for how web browsers will display the content on a page. Therefore if you want to style the content on your site, you will need to use the box model rules to display the content. using the box model will help massively.
EXAMPLE OF BOX MODEL :
width:260px;
padding:12px;
border:7px solid green;
margin:15px;
EXAMPLE OF BOX MODEL :
width:260px;
padding:12px;
border:7px solid green;
margin:15px;
BOX MODEL ELEMENTS |
EXPLANATION OF THE TERMThe margin is the furthest edge of the box. It is transparent and displays space between the element and other box model terms on the page. Margins can collapse into one another, so that the bottom margin of one element joins with the top margin of the element below it. [4]
The border is the next box model term surrounding the box. Borders can be colored or transparent. The border can beset to 0, if so it goes and the border edge is the same as the padding edge. Borders can be used for decorative purposes, and distinctively displays the webpage. The padding is the space between the content and the border. Padding is the same color as the background color for the box. Similar to the border, if the padding is set to 0, the padding border is the same as the next box model term, the content. The content is basically the element of the box. The content normally shows the text or image or whatever is displayed inside the box. Therefore the content displays the most important features of the webpage. |
CSS BOX MODEL EXAMPES :
P2 - LAYOUT OF A STYLE SHEET - SELECTORS
ELEMENT - for example the element selector selects all the paragraph (<p>) elements in the entire document, anywhere on the page. An example of an element selector is p { }. The single element selector is the most common, it indicates one HTML element type.
CLASS - selects any elements with the class name, for example "myclass" - the dot is how you say "this is a class name". An example of a class selector is .myclass { }.
To apply a style to a group of objects you need to define a class in the style sheet and then identify the element as belonging to that class in the HTML. [5]
ID - selects any element with the id name, for example "myid". ID's are unique, so that should only be one element - the hash is how you say "this is an id" - the id is a very specific selector. An example of an id selector is #myid { }. ID Selectors are especially useful for identifying areas of a page for instance which only require one instance. The ID definition can contain everything related to that page area.
CLASS - selects any elements with the class name, for example "myclass" - the dot is how you say "this is a class name". An example of a class selector is .myclass { }.
To apply a style to a group of objects you need to define a class in the style sheet and then identify the element as belonging to that class in the HTML. [5]
ID - selects any element with the id name, for example "myid". ID's are unique, so that should only be one element - the hash is how you say "this is an id" - the id is a very specific selector. An example of an id selector is #myid { }. ID Selectors are especially useful for identifying areas of a page for instance which only require one instance. The ID definition can contain everything related to that page area.