CSS is short for Cascading Style Sheets. It is a language that describes the style of an HTML(HyperText Markup Language) document. HTML is the standard language for writing Web pages. So basically CSS describes the structure and appearance of a Web page.

Box Model In HTML, elements can be considered as boxes. In CSS, when talking about design and layout, the term “box model” is used.

Explanation of the different parts: 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

Block and Inline Boxes

In CSS we broadly have two types of boxes — block boxes and inline boxes. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:

If a box is defined as a block, it will behave in the following ways:

• The box will break onto a new line

• The box will become as wide as its container, filling up 100% of the space available.

• The width and height properties of the box would be respected if set

• Padding, margin and border will cause other elements to be pushed away from the box

Examples of html elements that are block boxes by default are headings(h1, h2, h3, etc), paragraph(p) and div.

If a box is defined as inline, it will behave in the following ways:

• The box will not break onto a new line.

• The box will only be as wide as its content, not filling up the entire space of its container.

• The width and height properties will not apply.

• Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box, but horizontal padding, margin and borders will cause other inline boxes to move away.

Examples of html elements that are inline boxes by default are anchor tags(a), image(img) and span