CSS Box Model & Layout - Concepts

CSS selectors are the language within a language — a mini-language for precisely targeting HTML elements that need styling. The sophistication of CSS selectors is one of the things that sets expert CSS developers apart from beginners. While beginners primarily use element, class, and ID selectors, expert developers leverage the full power of attribute selectors, pseudo-classes, pseudo-elements, and combinators to write CSS that targets exactly what it needs without over-selecting and without requiring additional HTML classes. Writing precise, efficient selectors is a skill that dramatically reduces the volume of CSS required to style complex interfaces. The cascade in Cascading Style Sheets defines the algorithm by which the browser resolves conflicts when multiple CSS rules set the same property on the same element. Specificity is the primary factor: each selector is assigned a score based on its components. ID selectors contribute 100 points each. Class selectors, attribute selectors, and pseudo-classes contribute 10 points each. Element selectors and pseudo-elements contribute 1 point each. The selector with the higher specificity score wins regardless of source order. When specificity scores are equal, the later rule wins. The !important declaration overrides all specificity calculations for a specific property — but its use is strongly discouraged because it breaks the natural cascade, making styles extremely difficult to debug and override. CSS custom properties (CSS variables) are named values defined with the -- prefix that can be reused throughout the stylesheet. Defined on :root { --primary-color: #04AA6D; }, they are accessed with var(--primary-color). Unlike preprocessor variables (Sass, Less) which are compiled away and become static values in the output CSS, native CSS custom properties are live values that exist in the browser at runtime. They cascade through the DOM like any other property — a child element can override a parent's custom property value for its own subtree. JavaScript can read and write custom properties with getComputedStyle and element.style.setProperty, enabling dynamic theming, user preferences, and animation without class manipulation. Modern CSS provides powerful layout and design capabilities beyond basic selectors and properties. The calc() function performs mathematical calculations mixing different units: width: calc(100% - 2rem) makes an element fill its container minus 32px margin. The min(), max(), and clamp() functions create responsive values without media queries: font-size: clamp(1rem, 2.5vw, 2rem) sets a fluid font size between 1rem and 2rem. The aspect-ratio property maintains proportional dimensions: aspect-ratio: 16/9 keeps a video container at widescreen proportions regardless of its width. The object-fit property for <img> and <video> controls how media fills its container — contain (letterboxed), cover (cropped to fill), fill (stretched), and none (natural size).

In this section, we cover the fundamental aspects of css box model & layout. You'll learn core concepts, see real-world examples, and understand how to apply them in your projects.