JavaScript Style Properties & Box Model

In this tutorial, we will be learning how to use a number of common style properties, along with learning about the CSS box model. The style properties we will be going through are 'border', 'margin', 'margin-style' and 'background-color'.
We will start with border. A border is useful when you would like to place a border around a certain element. When using a border, you must select the type of the border you want, you will give the value of thickness, type and color.
The next style property is the margin property. When using this, you must declare the size of the margin you want.
When selecting a border, it is possible to give it a certain style by using the border-style property.
The background-color property is used when you would like to add a background color on the element.
See below for examples of all these properties being used:

The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. See image below on how to use.

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent