Modern CSS: A Technical Overview

Introduction

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It's a fundamental technology of the web, enabling the separation of content and presentation.

Key Insight: CSS follows a simple principle - select HTML elements and apply visual rules to them. The "cascading" part refers to how these rules combine and override each other based on specificity.

Core Concepts

The Box Model

Every element in CSS is represented as a rectangular box, with:

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

Units

CSS supports various units for measurements:

Selectors & Specificity

Basic Selectors

/* Element selector */
p { color: blue; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#header { font-size: 24px; }

/* Attribute selector */
input[type="text"] { border: 1px solid gray; }

/* Combinators */
div > p { margin: 10px; }  /* Direct child */
div + p { margin-top: 20px; }  /* Adjacent sibling */

Specificity

Specificity determines which CSS rule applies when multiple rules target the same element:

  1. Inline styles (1000)
  2. IDs (100)
  3. Classes, attributes, pseudo-classes (10)
  4. Elements, pseudo-elements (1)

Layout Systems

Flexbox

Flexbox is a one-dimensional layout system, perfect for distributing space among items in an interface.

1
2
3
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex: 1;
}

Grid

CSS Grid is a two-dimensional layout system, ideal for complex layouts.

1
2
3
4
5
6
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

CSS Frameworks & Tools

Utility-First CSS (Tailwind CSS)

Tailwind CSS is a utility-first framework that provides low-level utility classes to build custom designs:

<div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg shadow-md">
    <h2 class="text-xl font-bold">Title</h2>
    <button class="px-4 py-2 bg-white text-blue-500 rounded hover:bg-blue-50">
        Click me
    </button>
</div>

Component Libraries (shadcn/ui)

shadcn/ui provides a collection of reusable components built with Tailwind CSS and Radix UI:

Modern CSS Features

Custom Properties (Variables)

:root {
    --primary-color: #2563eb;
}

.button {
    background: var(--primary-color);
}

Container Queries

Style elements based on their container's size rather than the viewport:

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

Glossary of Terms

Box Model
The rectangular box that wraps every HTML element, consisting of content, padding, border, and margin.
Cascade
The algorithm that determines which CSS rules apply when multiple rules target the same element.
Specificity
The mechanism by which browsers decide which CSS property values are most relevant to an element.
Flexbox
A CSS layout model optimized for user interface design, working in one dimension at a time.
Grid
A two-dimensional CSS layout system optimized for designing complex grid-based layouts.
Media Query
CSS technique to apply styles based on device characteristics (e.g., viewport width, device type).
Container Query
CSS feature allowing styles to be applied based on the size of a container rather than the viewport.
Pseudo-class
Keywords added to selectors to specify element state (e.g., :hover, :focus).
Pseudo-element
Keywords added to selectors to style specific parts of an element (e.g., ::before, ::after).
Utility-First CSS
A CSS methodology where designs are built by composing utility classes (e.g., Tailwind CSS).
CSS-in-JS
Technique where CSS is written directly in JavaScript, often used in component-based frameworks.
Custom Properties
CSS variables that can be reused throughout a document (--variable-name).
BEM
Block Element Modifier - a naming convention for writing maintainable CSS classes.
CSSOM
CSS Object Model - programming interface for CSS in JavaScript.