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 box model allows us to place a border around elements and space elements in relation to other elements. Example of the Box Model.
Box Model Elements
The margin is the furthest edge of the box. it has no colour and is the space between one element and another box model on a page, one Margin can join with another so the top of one margin can join with the bottom of another margin.
The border is the next box model term surrounding the box. The border-style property specifies what kind of border to display. Borders can either be coloured or not, borders can also be used to add to the presentation of a page, so it can stand out from other websites.
The padding is the space between the content and the border. it is generally the same colour as the background of the content, if the padding is set to 0 then it is considered to be the same as the content.
The content is basically what is meant to be displayed in the box. for example any images or text will be displayed in the content box, this means that the content can be consider as the most important part of the webpage.
Three types of selectors.
CLASS- The .Class selector selects everything that with class. an example of this is .intro. class selectors are used when you want your styling to apply to a group of elements altogether rather than just one element.
ID- an example of a id selector is a #, it selects only one element on the page - the # is how you say "this is an id" - the id is a very specific selector. The # symbol to a selector allows us to target by id. This is easily the most common selector as it only selects one target on a page.
TAG-The tag selector applies to specific HTML tags, It is used to redefine existing HTML tags. you would use it when you want to change the formatting options for an HTML tag, such as the <h1> (heading 1) tag.