CSS Fundamentals: Syntax, Units & Inheritance

1. CSS Syntax Rules & Declaration Blocks

A CSS document is a sequence of statements. The most common statement is a ruleset, which pairs a selector with a declaration block:

• Case Sensitivity: CSS property names and keywords are case-insensitive, but class and ID selectors match HTML case-sensitively in standard HTML mode. Convention dictates strict lowercase for all CSS properties.
• Whitespace Tolerant: Extra spaces, tabs, and newlines are ignored by the CSS parser, allowing formatting for optimal developer readability.
• Semicolon Terminator: Each declaration must terminate with a semicolon ;. Omitting a semicolon causes the browser to discard both that declaration and the subsequent one due to parsing errors.

/* Clean CSS declaration block formatting */
.feature-box {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  max-width: 450px;
}

.feature-box h4 {
  margin-top: 0;
  color: #0f172a;
}

.feature-box p {
  color: #64748b;
  margin-bottom: 0;
}

2. CSS Inheritance Mechanics: Inherited vs Non-Inherited

In CSS, when no value is specified for a property on an element, the browser must determine its value through inheritance:

The Four Explicit Inheritance Control Keywords:

CSS provides four universal keywords that can be applied to any CSS property:

• inherit: Forces the property to take the computed value of its parent element.
• initial: Resets the property to its official default value defined in the W3C CSS specification (e.g., color: canvastext or black).
• unset: Acts as inherit if the property naturally inherits; acts as initial if it does not naturally inherit.
• revert: Rolls back the value to the browser's User Agent default stylesheet, ignoring developer styles.

/* Parent establishes font styling */
.parent-container {
  color: #0284c7;
  border: 2px dashed #0284c7;
  padding: 15px;
}

/* Naturally inherits parent's color */
.child-natural {
  font-weight: bold;
}

/* Explicitly overrides inheritance back to initial */
.child-initial {
  color: initial;
}

3. CSS Measurement Units: Absolute vs. Relative

Choosing the correct unit is the foundation of accessible, responsive web design:

A. Absolute Units (Avoid for Layouts)

px (pixel), pt (point), cm, mm, in. In CSS, 1px is technically 1/96th of an inch (an angular visual reference pixel), not a physical hardware pixel. While fine for thin borders (e.g. 1px solid #ccc), using px for font sizes harms accessibility because it overrides user browser zoom preferences.

B. Font-Relative Units (rem vs em)

C. Viewport Units (vw, vh, dvh, svh, lvh)

• 1vw: 1% of browser viewport width.
• 1vh: 1% of browser viewport height.
• 1dvh (Dynamic Viewport Height): Dynamically adjusts as mobile browser address bars expand or contract during scrolling. Solves mobile overflow bugs!
• 1svh (Small Viewport Height): Height when the mobile address bar is fully expanded.
• 1lvh (Large Viewport Height): Height when the mobile address bar is retracted.

/* Optimal accessible reading measure */
.readable-prose {
  font-size: 1.125rem; /* 18px assuming 16px root */
  line-height: 1.7;
  max-width: 60ch; /* Perfect reading length: 45-75 characters */
  background: #fdfdfd;
  padding: 1.5rem;
  border-left: 4px solid #8b5cf6;
}

4. CSS Custom Properties (Variables)

CSS Variables allow developers to store reusable values directly in the CSS cascade:

• Declaration: Declared with a double hyphen prefix: --brand-primary: #3b82f6;.
• Global Scope: Declaring in the :root pseudo-class makes variables available throughout the entire document tree.
• Consumption & Fallbacks: Accessed via the var() function: color: var(--brand-primary, #000);.
• Reactive & Dynamic: Unlike preprocessor variables (Sass), CSS custom properties update dynamically in response to media queries and JavaScript without recompilation!

:root {
  --theme-bg: #1e293b;
  --theme-text: #f8fafc;
  --theme-accent: #38bdf8;
}

.theme-card {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  padding: 20px;
  border-radius: 8px;
  border-top: 4px solid var(--theme-accent);
}

.theme-card h4 {
  color: var(--theme-accent);
  margin-top: 0;
}

5. Frequently Asked Questions (FAQ)