CSS

CSS can be applied in three ways: inline, internal, and external. Each has different scope, priority, and use cases.

Selectors target HTML elements for styling. Understanding selector types and specificity (which rule wins when several apply) is core to writing predictable CSS.

Inheritance lets certain CSS properties automatically pass from a parent element to its children, reducing repetition. Not all properties inherit by default — mostly text-relate...

Every HTML element is rendered as a rectangular box made of content, padding, border, and margin. Understanding this model is essential for controlling spacing and sizing accura...

CSS units define lengths, sizes, and proportions. They're split into absolute units (fixed size) and relative units (scale based on context, like parent font size or viewport).

CSS functions let values be computed dynamically instead of hard-coded — performing math, choosing responsive values, or referencing variables. calc(), clamp(), min(), and max()...

CSS custom properties (variables) let you store reusable values — colors, spacing, fonts — in one place and reference them throughout a stylesheet, making themes and maintenance...

CSS offers multiple color formats and a rich set of background properties for controlling fills, images, gradients, and positioning behind content.

The display property determines how an element participates in the page's layout — whether it takes a full line, sits inline, or becomes a flex/grid container. It's the foundati...

Flexbox is a one-dimensional layout system for arranging items in a row or column, distributing space, and aligning content — ideal for navbars, cards, and centering.

CSS Grid is a two-dimensional layout system that arranges items into rows and columns simultaneously, making it ideal for full page layouts and complex UI structures.

The position property controls how an element is placed relative to its normal position, its nearest positioned ancestor, or the viewport — enabling overlays, sticky headers, an...

Typography properties control how text looks and reads: font family, size, weight, spacing, and alignment — key to readability and visual hierarchy.

Borders define an element's visible edge, while visual effects like shadows and object-fit shape how content and media appear inside their containers.

Pseudo-classes select elements based on state or position (like :hover or :first-child), while pseudo-elements target a specific part of an element (like ::before or ::first-line).

Responsive CSS makes layouts adapt gracefully across screen sizes and devices, primarily through media queries, flexible units, and fluid layout techniques.

Transitions animate property changes smoothly over time, while transforms let elements move, rotate, scale, or skew without affecting document flow — together they create polish...

CSS animations allow multi-step, looping, or complex motion sequences using @keyframes, going beyond what simple transitions can achieve (which only animate between two states).