CSS syllabus

The CSS box model describes the rectangular boxes that are generated for elements in the document tree. It consists of margins, borders, padding, and the actual content area of an element.

CSS selectors are patterns used to select elements in an HTML document that you want to style. Examples include:

Element selector (div, p, h1, etc.).

Class selector (.class-name).

ID selector (#id-name).

Attribute selector ([attribute=value]).

inline elements flow with the surrounding content and do not start on a new line.

block elements take up the full width available and start on a new line.

inline-block elements are displayed as blocks but flow like inline elements.

flex containers allow flexible box layout within their children.

Padding is the space between the content and the border of an element.
Margin is the space outside the border of an element, which creates space between elements.

static:

The default positioning. Elements are positioned according to the normal flow of the document.

relative:

Elements are positioned relative to their normal position.

absolute:

Elements are positioned relative to the nearest positioned ancestor (or the initial containing block if no positioned ancestor is found).

fixed:

Elements are positioned relative to the viewport, so they do not move when the page is scrolled.

Media queries are used to apply different styles depending on the characteristics of the device or viewport, such as width, height, orientation, etc. They enable responsive web design.

CSS specificity determines which CSS rule is applied by the browser when multiple conflicting rules target the same element. It is calculated based on the types of selectors used (element, class, ID, inline styles).

There are several methods:

Using flexbox (align-items: center on the parent).
Using grid (align-items: center on the parent).
Using position and transform (position: absolute with top: 50% and transform: translateY(-50%)).
Using table-cell and vertical-align.

Inline Elements:

Inline elements do not start on a new line and only take up as much width as necessary. Examples of inline elements include (span), (a), (strong), (em). They do not respect top and bottom margins and paddings, but they respect left and right margins and paddings.

Block Elements:

Block elements start on a new line and take up the full width available. Examples of block elements include (div), (p), (h1)-(h6), (ul), (li). They respect both top and bottom margins and paddings, as well as left and right margins and paddings.

Key Differences:

Layout: Inline elements flow with the surrounding content, while block elements create a visual block and start on a new line. Width: Inline elements only occupy the width of their content, whereas block elements occupy the full width available. Margins/Padding: Inline elements ignore top and bottom margins/paddings, while block elements respect them.