Selector Priority and Specificity

CSS rules apply based on priority, where higher specificity overrides lower specificity. Specificity is calculated by counting selector components:

• ID selectors: Highest weight.
• Class, attribute, and pseudo-class selectors: Medium weight.
• Type and pseudo-element selectors: Lowest weight.

For instance, #header .nav-list li a:hover carries a higher specificity than .main-nav ul .link-item because it includes an ID.

Combining Selectors for Reusability

Styles can be reused and extended by combining multiple classes on a single element.

<button class="action-btn">Default</button>
<button class="action-btn highlight">Highlighted</button>
<style>
  .action-btn {
    display: inline-block;
    padding: 0.4em 1em;
    margin-right: 0.6em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25em;
    border: none;
    background: #d4d4d4;
    color: #222;
  }
  .action-btn.highlight {
    color: #fff;
    background: #1a73e8;
  }
</style>

Property Inheritance

Certain properties, such as font and color settings, naturally inherit values from their parent elements unless explicitly overridden.

* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

.custom-module {
    box-sizing: content-box; /* Overrides the inherited border-box */
}

Initial and Calculated Values

Every CSS property has an initial default value. For example, background-color defaults to transparent, while margin defaults to 0. The initial keyword forces a property back to its default state.

The browser resolves styles through a cascading and computation process, determining the final rendered value from declarations, specificity, and inheritance.

Layout Fundamentals

Layout engines determine the dimensions and positions of elements based on their container, siblings, and content. Common layout paradigms include Normal Flow (Block and Inline), Table, Flexbox, and Grid.

The Box Model

Each element generates a box consisting of:

• Margin: Space outside the border.
• Border: The boundary around the padding.
• Padding: Space between the border and content.
• Width/Height: The dimensions of the content area.

Setting margin: auto horizontally centers a block element. The box-sizing property alters whether width includes padding and borders. overflow manages content that exceeds the box boundaries (visible, hidden, scroll).

Block vs. Inline Elements

The display property controls box generation:

Formatting Contexts

Inline Formatting Context (IFC)

A container holding only inline-level boxes establishes an IFC. In an IFC, boxes are laid out horizontally, wrapping to a new line when necessary. Alignment is governed by text-align horizontally and vertical-align vertically. Inline boxes will avoid overlapping with floated elements.

Block Formatting Context (BFC)

A BFC is created by the root element, floated or absolutely positioned elements, inline-block, Flex/Grid items, and block boxes with overflow not set to visible, or display: flow-root.

Within a BFC, boxes are laid out vertically. Vertical margins between adjacent blocks collapse, but margins inside a BFC do not collapse with those outside. Furthermore, a BFC isolates its content from external floats, preventing overlap.

Modern Layout Systems

Flexbox (display: flex) provides a one-dimensional layout model for distributing space and aligning items efficiently. Grid (display: grid) offers a two-dimensional layout system, enabling complex tile and magazine-style designs.

Floats

Floating an element removes it from the normal flow and aligns it to the left or right of its container, allowing inline content to wrap around it.

<article>
    <img src="https://example.com/landscape.jpg" alt="Desert landscape" style="width: 250px;">
    <p>The arid landscape stretches across the valley, featuring unique rock formations and sparse vegetation adapted to the harsh climate.</p>
</article>
<style>
  img {
      float: right;
      margin-left: 1em;
  }
</style>

Positioning Strategies

The position property determines how an element is placed in the document:

• static: The default flow position; offsets do not apply.
• relative: Positioned relative to its normal position; offsets move it without affecting surrounding elements.
• absolute: Removed from normal flow; positioned relative to its nearest positioned ancestor.
• fixed: Removed from normal flow; positioned relative to the viewport, useful for persistent UI like navigation bars.
• sticky: Treated as relative until it crosses a specified threshold within its scrolling container, at which point it behaves like fixed.