CSS Fundamentals

Master the core CSS specifications that form the foundation of modern web styling. Learn about CSS 2.1, the latest CSS Snapshot, syntax rules, and values & units from official W3C specifications.

CSS 2.1 - The Stable Foundation

CSS 2.1 is the stable foundation of CSS, containing all features that have been interoperably implemented across browsers.

CSS 2.1 Core Features

Essential CSS features from the CSS 2.1 specification

<!-- CSS 2.1 Foundation Examples -->
<div class="css21-demo">
  <header id="header">
    <h1>CSS 2.1 Foundation</h1>
    <p>Demonstrating core CSS 2.1 features</p>
  </header>

  <!-- Basic selectors -->
  <main>
    <section>
      <p>This is a regular paragraph demonstrating element selectors.</p>
      <p class="highlight">This paragraph uses a class selector for highlighting.</p>
      <p>Another paragraph with <span class="highlight">inline highlighting</span>.</p>
    </section>

    <!-- Box model examples -->
    <section>
      <h2>Box Model Examples</h2>
      <div class="box">
        <p>This div demonstrates the CSS box model with width, padding, border, and margin.</p>
      </div>
    </section>

    <!-- Positioning examples -->
    <section>
      <h2>Positioning Examples</h2>
      <div class="positioned">
        <p>This div is positioned relatively from its normal position.</p>
      </div>
      
      <div style="position: relative; height: 200px; border: 1px solid #ccc;">
        <div class="absolute">
          <p>Absolutely positioned element</p>
        </div>
      </div>
    </section>

    <!-- Float examples -->
    <section>
      <h2>Float Layout</h2>
      <div>
        <div class="float-left">
          <p>This content floats to the left, allowing other content to wrap around it.</p>
        </div>
        <p>This text wraps around the floated element, demonstrating the classic CSS 2.1 layout technique that was widely used before flexbox and grid.</p>
        <div class="clear-fix"></div>
      </div>
    </section>

    <!-- Link states -->
    <section>
      <h2>Link States</h2>
      <nav>
        <ul>
          <li><a href="#home">Home (hover me)</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </section>

    <!-- Pseudo-elements and classes -->
    <section>
      <h2>Pseudo-selectors</h2>
      <div class="pseudo-demo">
        <p>First child paragraph</p>
        <p>Second paragraph</p>
        <p>Third paragraph</p>
      </div>
    </section>
  </main>
</div>

Explanation:

CSS 2.1 established the fundamental concepts of CSS including selectors, the box model, positioning, and floats. These features are universally supported and form the basis for all modern CSS.

Accessibility Tips:

Always provide sufficient color contrast (CSS 2.1 doesn't specify, but WCAG does)
Use semantic markup alongside CSS for better accessibility
Test layouts with zoom up to 200% to ensure readability
Avoid using positioning to hide content from screen readers

CSS Snapshots - Current State of CSS

CSS Snapshots define the current state of CSS, distinguishing between stable features and experimental ones.

CSS Snapshot 2024 Features

Key features included in the CSS Snapshot 2024

<!-- CSS Snapshot 2024 Features Demo -->
<div class="snapshot-demo">
  <header>
    <h1>CSS Snapshot 2024 Features</h1>
    <p>Showcasing stable modern CSS capabilities</p>
  </header>

  <!-- Grid layout -->
  <section class="container">
    <h2>CSS Grid Layout</h2>
    <div class="grid-showcase">
      <article class="card">
        <h3>Grid Item 1</h3>
        <p>Auto-fitting grid layout with custom properties</p>
      </article>
      
      <article class="card">
        <h3>Grid Item 2</h3>
        <p>Responsive without media queries using minmax()</p>
      </article>
      
      <article class="card">
        <h3>Grid Item 3</h3>
        <p>Logical properties for international support</p>
      </article>
    </div>
  </section>

  <!-- Modern color functions -->
  <section>
    <h2>Modern Color Functions</h2>
    <div class="color-samples">
      <div class="color-card hsl-color">
        <h3>HSL Colors</h3>
        <p>Space-separated syntax</p>
      </div>
      
      <div class="color-card css-var">
        <h3>CSS Variables</h3>
        <p>Custom properties in action</p>
      </div>
    </div>
  </section>

  <!-- Modern selectors -->
  <section class="modern-selectors">
    <h2>Advanced Selectors</h2>
    
    <form>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
        <span class="error-message">Please enter a valid email</span>
      </div>
      
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
        <span class="error-message">Password is required</span>
      </div>
    </form>

    <div class="selector-demo">
      <div class="item featured">Featured Item</div>
      <div class="item highlighted">Highlighted Item</div>
      <div class="item">Regular Item</div>
    </div>
  </section>

  <!-- Flexbox examples -->
  <section>
    <h2>Flexbox Layout</h2>
    <div class="flex-container">
      <div class="flex-item">Flex Item 1</div>
      <div class="flex-item">Flex Item 2</div>
      <div class="flex-item">Flex Item 3</div>
    </div>
  </section>

  <!-- Dark mode -->
  <section class="dark-mode-demo">
    <h2>Automatic Dark Mode</h2>
    <div class="theme-card">
      <h3>Adaptive Theme</h3>
      <p>This card automatically adapts to your system's color scheme preference using prefers-color-scheme media query.</p>
    </div>
  </section>

  <!-- Container queries experimental -->
  <section>
    <h2>Container Queries (Experimental)</h2>
    <div class="container-demo">
      <div class="responsive-component">
        <h3>Responsive Component</h3>
        <p>This component changes layout based on its container size, not viewport size.</p>
      </div>
    </div>
  </section>
</div>

Explanation:

CSS Snapshots help developers understand which features are stable for production use versus which are still experimental. The 2024 snapshot includes grid, flexbox, custom properties, and modern selectors.

Accessibility Tips:

Use prefers-color-scheme to respect user's system preferences
Test new CSS features with progressive enhancement
Provide fallbacks for experimental features
Ensure layouts work without JavaScript and advanced CSS

CSS Syntax Level 3

CSS Syntax Level 3 defines how CSS is parsed, including error handling, recovery, and the overall grammar of CSS.

CSS Syntax Rules and Error Handling

Understanding CSS parsing and syntax requirements

<!-- CSS Syntax Examples -->
<div class="css-syntax-demo">
  <header>
    <h1>CSS Syntax & Error Handling</h1>
    <p>Demonstrating valid CSS patterns and error recovery</p>
  </header>

  <!-- Basic rule structure examples -->
  <section>
    <h2>Basic Selectors</h2>
    <div class="selector-examples">
      <div class="element">Element Selector</div>
      <div class="class-example">Class Selector</div>
      <div id="id-example">ID Selector</div>
      <article class="multiple selector">Multiple Selectors</article>
    </div>
  </section>

  <!-- Nested CSS examples -->
  <nav class="navigation">
    <div class="nav-brand">
      <a href="#" class="brand-link">Brand</a>
    </div>
    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link">Services</a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-link">Web Design</a></li>
          <li><a href="#" class="dropdown-link">Development</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <!-- At-rules examples -->
  <section class="responsive-section">
    <div class="responsive">
      <h3>Responsive Content</h3>
      <p>This section uses media queries and supports rules</p>
    </div>
    
    <div class="grid-container">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
    </div>
  </section>

  <!-- CSS functions examples -->
  <section class="dynamic-section">
    <h3>Dynamic CSS Functions</h3>
    <div class="dynamic">
      <p>This section demonstrates CSS mathematical and color functions</p>
    </div>
  </section>

  <!-- Error handling examples -->
  <section class="error-examples">
    <h3>Error Handling</h3>
    <div class="invalid">
      <p>This demonstrates CSS error recovery - invalid properties are ignored</p>
    </div>
    
    <div class="also-invalid">
      <p>Invalid values are skipped, valid ones still work</p>
    </div>
    
    <div class="example">
      <p>Well-formed selectors work even after malformed ones</p>
    </div>
  </section>

  <!-- CSS validation examples -->
  <section class="validation-demo">
    <h3>CSS Validation</h3>
    <form class="demo-form">
      <div class="form-group">
        <label for="name">Valid CSS Example</label>
        <input type="text" id="name" name="name">
      </div>
      
      <div class="form-group">
        <label for="email">Error Recovery Demo</label>
        <input type="email" id="email" name="email">
      </div>
      
      <button type="submit">Submit</button>
    </form>
  </section>
</div>

Explanation:

CSS Syntax Level 3 ensures that CSS parsers handle errors gracefully by ignoring invalid properties, values, or rules while continuing to process valid CSS.

Accessibility Tips:

Use CSS validation tools to catch syntax errors early
Test CSS with different browsers to ensure consistent parsing
Provide fallback values for experimental properties
Keep CSS organized to make syntax errors easier to spot

CSS Values and Units Level 4

CSS Values and Units Level 4 defines the common values and units used across all CSS specifications, including new viewport units and mathematical functions.

Modern CSS Values and Units

New and updated values and units from CSS Values Level 4

<!-- CSS Values and Units Demo -->
<div class="values-units-demo">
  <header>
    <h1>CSS Values & Units Level 4</h1>
    <p>Exploring modern measurement and value systems</p>
  </header>

  <!-- Length units -->
  <section class="lengths">
    <h2>Length Units Showcase</h2>
    <div class="unit-examples">
      <div class="absolute-units">
        <h3>Absolute Units</h3>
        <div class="pixel-box">Pixel border (1px)</div>
        <div class="inch-margin">Inch margin (0.5in)</div>
        <div class="point-padding">Point padding (12pt)</div>
      </div>
      
      <div class="relative-units">
        <h3>Relative Units</h3>
        <div class="em-font">Em font sizing (1.2em)</div>
        <div class="rem-line">Rem line height (1.5rem)</div>
        <div class="percent-width">Percentage width (50%)</div>
      </div>
      
      <div class="viewport-units">
        <h3>Viewport Units</h3>
        <div class="vh-height">Viewport height (100vh)</div>
        <div class="vw-width">Viewport width (100vw)</div>
        <div class="dynamic-vh">Dynamic viewport (100dvh)</div>
        <div class="inline-viewport">Viewport inline (2vi)</div>
        <div class="block-viewport">Viewport block (1vb)</div>
      </div>
      
      <div class="container-units">
        <h3>Container Query Units</h3>
        <div class="cqw-font">Container width font (5cqw)</div>
        <div class="cqh-padding">Container height padding (2cqh)</div>
      </div>
    </div>
  </section>

  <!-- Mathematical functions -->
  <section class="math-functions">
    <h2>Mathematical Functions</h2>
    <div class="math-examples">
      <div class="calc-width">
        <h3>calc() Function</h3>
        <p>Dynamic calculation: calc(100% - 2rem)</p>
      </div>
      
      <div class="min-max-demo">
        <h3>min() and max()</h3>
        <div class="min-width">Min width: min(500px, 100%)</div>
        <div class="max-height">Max height: max(200px, 50vh)</div>
      </div>
      
      <div class="clamp-demo">
        <h3>clamp() Function</h3>
        <p>Responsive text: clamp(1rem, 4vw, 2rem)</p>
        <div class="clamp-padding">Responsive padding: clamp(0.5rem, 2%, 1.5rem)</div>
      </div>
      
      <div class="round-demo">
        <h3>round() Function</h3>
        <div class="round-up">Rounded up: round(up, 101px, 10px)</div>
        <div class="round-zero">Rounded to zero: round(to-zero, 106px, 10px)</div>
      </div>
    </div>
  </section>

  <!-- Color values -->
  <section class="colors">
    <h2>Color Value Systems</h2>
    <div class="color-examples">
      <div class="traditional-colors">
        <h3>Traditional Colors</h3>
        <div class="hex-color">Hex: #ff0000</div>
        <div class="rgb-color">RGB: rgb(255, 0, 0)</div>
        <div class="hsl-color">HSL: hsl(0, 100%, 50%)</div>
      </div>
      
      <div class="modern-colors">
        <h3>Modern Color Formats</h3>
        <div class="hwb-color">HWB: hwb(0 0% 0%)</div>
        <div class="lab-color">LAB: lab(50% 20 -30)</div>
        <div class="lch-color">LCH: lch(50% 40 120)</div>
        <div class="oklch-color">OKLCH: oklch(0.7 0.2 180)</div>
      </div>
      
      <div class="color-mixing">
        <h3>Color Mixing</h3>
        <div class="srgb-mix">SRGB mix: color-mix(in srgb, red 30%, blue)</div>
        <div class="oklch-mix">OKLCH mix: color-mix(in oklch, var(--primary) 60%, white)</div>
      </div>
      
      <div class="relative-colors">
        <h3>Relative Colors</h3>
        <div class="base-color">Base color</div>
        <div class="lighter-color">Lighter variant</div>
      </div>
    </div>
  </section>

  <!-- Global values -->
  <section class="global-values">
    <h2>Global Values</h2>
    <div class="global-examples">
      <div class="inherit-demo">Inherit value</div>
      <div class="initial-demo">Initial value</div>
      <div class="unset-demo">Unset value</div>
      <div class="revert-demo">Revert value</div>
      <div class="revert-layer-demo">Revert-layer value</div>
    </div>
  </section>

  <!-- Custom identifiers -->
  <section class="identifiers">
    <h2>Custom Identifiers & Strings</h2>
    <div class="identifier-examples">
      <div class="grid-area-demo">Grid area: header</div>
      <div class="animation-demo">Animation name: slideIn</div>
      <div class="content-demo">String content: "Hello, World!"</div>
      <div class="font-demo">Font family: "Times New Roman"</div>
    </div>
  </section>
</div>

Explanation:

CSS Values and Units Level 4 introduces powerful new units for responsive design (container units, dynamic viewport units) and enhanced mathematical functions for flexible layouts.

Accessibility Tips:

Use relative units (rem, em) for better scaling with user preferences
Test viewport units across different devices and orientations
Provide fallbacks for newer units that might not be supported
Use clamp() for responsive typography that scales with viewport

CSS Fundamentals Best Practices

Specification Awareness

• Check CSS Snapshot for stable feature status
• Use progressive enhancement for new features
• Provide fallbacks for experimental properties
• Follow W3C specifications for standard behavior
• Validate CSS syntax to catch errors early

Modern CSS Usage

• Use logical properties for international layouts
• Leverage mathematical functions for responsive design
• Implement custom properties for maintainable themes
• Use modern color spaces for better color accuracy
• Test across browsers and devices regularly