Targeting Elements via Document Structure

Structural pseudo-classes allow developers to select elements based on their position within the DOM tree, eliminating the need for manual class assignments on every item.

/* Highlight the initial list item */
.nav-link:first-child {
    font-weight: bold;
}

/* Highlight the final list item */
.nav-link:last-child {
    border-right: none;
}

/* Highlight the fourth item */
.nav-link:nth-child(4) {
    color: #e63946;
}

Advanced Pattern Matching with nth-child

The nth-child function supports algebraic expressions to create repeating or ranged patterns across sibling elements. The variable n represents a series of integers starting from zero.

/* Style every other row in a table */
tr:nth-child(2n) {
    background-color: #f8f9fa;
}

/* Target elements starting at position six */
.list-item:nth-child(n+6) {
    opacity: 0.6;
}

/* Apply styles only to the first three elements */
.card:nth-child(-n+3) {
    border-color: #457b9d;
}

Generating Decorative Content with Pseudo-Elements

Pseudo-elements inject virtual elements into the rendering tree without modifying the HTML markup. They are primarily used for visual enhancements, icons, or clearfix techniques.

Critical implementation rules:

• The content property is mandatory. Use an empty string ("") for purely stylistic hooks.
• These elements render as inline by default; apply display: block or inline-block to control dimensions.
• Specificity matches that of a standard element selector.

.tooltip-container {
    position: relative;
    padding: 12px 20px;
    background: #f1faee;
    border-radius: 6px;
}

.tooltip-container::before {
    content: "ℹ️ ";
    margin-right: 8px;
}

.tooltip-container::after {
    content: attr(data-tooltip);
    display: inline-block;
    padding: 4px 8px;
    background: #1d3557;
    color: white;
    border-radius: 4px;
    font-size: 12px;
}

Standardizing Browser Defaults

Browsers apply varying default margins, padding, and line-heights to HTML elements. A normalization strategy ensures consistent rendering across engines.

/* Global reset with modern sizing behavior */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove default list indicators */
ul, ol {
    list-style: none;
}

/* Normalize form controls */
button, input, textarea {
    font: inherit;
    outline: none;
}

The CSS Box Model Architecture

Every element renderde by the browser is treated as a rectangular box. Layout calculations rely on four concentric layers:

• Content Box: Defined by width and height.
• Padding: Transparent space between the content and the border.
• Border: The visual edge surrounding the padding.
• Margin: External spacing that pushes adjacent elements apart.

.panel {
    width: 300px;
    height: auto;
    background: #a8dadc;
    padding: 24px;
    border: 2px solid #1d3557;
    margin-bottom: 32px;
}

Border Configuration

Borders can be applied uniformly or to specific edges. The shorthand syntax accepts width, style, and color in any order.

.dashboard-widget {
    width: 250px;
    height: 150px;
    border-top: 4px solid #e63946;
    border-left: 4px dotted #457b9d;
    border-bottom: 4px dashed #1d3557;
}

Padding Distribution

Padding values follow a clockwise shorthand convention starting from the top edge. When fewer than four values are provided, opposite sides mirror the defined ones.

.data-table-cell {
    width: 100%;
    padding: 16px 24px; /* Vertical: 16px, Horizontal: 24px */
}

.hero-section {
    padding: 40px 20px 60px; /* Top: 40px, Sides: 20px, Bottom: 60px */
}

Box Sizing Calculation

By default, the CSS box model uses content-box, meaning padding and borders increase the total rendered dimensions. Switching to border-box forces the declared width and height to encompass padding and borders, preventing layout overflow.

.fixed-sidebar {
    width: 280px;
    padding: 30px;
    border: 10px solid #333;
    box-sizing: border-box; /* Maintains exact 280px width regardless of padding/border */
}

Margin Spacing & Centering

Margins control external spacing. Horziontal centering a block element requires a declared width paired with automatic horizontal margins.

.main-wrapper {
    width: 960px;
    margin: 0 auto; /* Centers horizontally; maintains zero top/bottom margin */
}

Managing Content Overflow

When child elements exceed a container's fixed dimensions, the overflow property dictates the clipping and scrolling behavior.

.text-overflow-container {
    height: 200px;
    overflow: auto; /* Scrollbars appear dynamically */
}

Margin Interaction Quirks

Sibling Margin Collapsing

Vertically stacked block elements with adjacent vertical margins do not add together. Instead, the larger of the two values dictates the spacing.

.card {
    width: 100%;
    padding: 16px;
    background: #fff;
}
.card-top {
    margin-bottom: 40px;
}
.card-bottom {
    margin-top: 20px;
}
/* The actual gap between .card-top and .card-bottom will be 40px, not 60px. */

Parent-Child Margin Collapse

When a child element's top margin touches the top edge of its parent without intervening padding or borders, the margin collapses outward, shifting the parent instead of the child.

Resolution strategies:

• Apply padding-top to the parent.
• Add a transparent border-top to the parent.
• Trigger a block formatting context with overflow: hidden on the parent.

.parent-box {
    background: #e9c46a;
    /* Fix 1: overflow: hidden; */
    /* Fix 2: border-top: 1px solid transparent; */
    /* Fix 3: padding-top: 1px; */
}
.child-element {
    margin-top: 50px; /* Prevents parent displacement */
}

Inline Element Vertical Spacing

Inline elements ignore vertical margin and padding for flow positioning. To adjust vertical spacing, modify line-height or change the display property to inline-block or flex.

.tag-label {
    display: inline-block;
    padding: 4px 8px;
    margin: 4px 0; /* Now applies vertical spacing */
    background: #f4f4f4;
}

Corner Radius & Shape Generation

The border-radius property curves element corners using the same clockwise shorthand logic as padding. Values can be defined in pixels or percentages.

.rounded-panel {
    width: 300px;
    height: 200px;
    border-radius: 16px 8px 32px 4px; /* TopL, TopR, BotR, BotL */
}

/* Circular avatar */
.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

/* Pill-shaped button */
.submit-btn {
    height: 44px;
    padding: 0 24px;
    border-radius: 22px; /* Exactly half the height creates perfect capsules */
}

Drop Shadows

Box shadows provide depth through layered rendering. The syntax requires horizontal and vertical offsets, followed by optional blur, spread, color, and positioning keywords.

.floating-card {
    /* OffsetX OffsetY Blur Spread Color Inset */
    box-shadow: 8px 12px 16px -4px rgba(0, 0, 0, 0.15);
}
.floating-card-inner {
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
}

Recommended CSS Declaration Order

To improve maintainability, declare properties in this sequence:

1. Box Model: display, position, width, height, padding, margin, overflow
2. Typography: font, line-height, text-align, color
3. Visual Enhancements: background, border, box-shadow, border-radius, transform, transition