CSS Reference

Cascading Style Sheets (CSS) determines the entire visual presentation of the web. It has undergone several massive paradigm shifts over the last 25 years.

The Early Days & The Separation of Concerns

In the early 1990s, the web was entirely structural. To make text red, you used the <font color="red"> tag. To center a block of text, you used the <center> tag. Presentation was hardcoded into the structure.

CSS was introduced in 1996 by Håkon Wium Lie to solve this. The core philosophy was the Separation of Concerns: HTML should dictate what the content is (a heading, a paragraph), and CSS should dictate how it looks. This “Cascade” allowed a single .css file to style thousands of HTML pages instantaneously.

The Preprocessor Era (SASS, LESS, Stylus)

As websites grew into massive applications in the late 2000s, writing raw CSS became incredibly tedious. Developers had to repeat identical color hex codes hundreds of times. If a brand color changed, it required massive find-and-replace operations. Furthermore, CSS lacked logic, variables, and the ability to nest selectors.

Enter CSS Preprocessors, most notably SASS (Syntactically Awesome Style Sheets) and SCSS.

Preprocessors added programming language features to CSS:

• Variables: $brand-blue: #1DA1F2;
• Nesting: Writing .nav { a { color: red; } } instead of .nav a { color: red; }.
• Mixins: Reusable chunks of styles that took arguments.

The browser doesn’t understand SCSS. Developers had to run a “build step” via Node.js or Ruby to compile their SCSS files back into standard, flat CSS.

The Framework & Utility Era

Even with SASS, naming things remained the hardest part of CSS (e.g., should this button be called .btn-primary or .action-button?). Large codebases suffered from “Append-Only” stylesheets—developers were too afraid to delete old CSS classes because they didn’t know what HTML it might break, so CSS files grew infinitely.

Bootstrap (OOCSS)

Twitter released Bootstrap in 2011. It provided pre-built, object-oriented components. Developers simply added <button class="btn btn-primary"> to get a perfect button. However, this led to an era where every website looked identical.

Tailwind CSS (Utility-First)

In 2017, Tailwind CSS popularized the “Utility-First” (Atomic) paradigm. Instead of creating a .card class with 15 rules inside it, Tailwind provided thousands of tiny, single-purpose classes (e.g., flex, pt-4, text-center, bg-white).

Developers wrote HTML that looked like this: <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">.

The Paradigm Shift: Tailwind essentially reversed the original “Separation of Concerns.” By tightly coupling styles back into the HTML file, developers no longer had to invent names for CSS classes, and deleting an HTML element guaranteed its styles were deleted too, fixing the “Append-Only” problem.

The Modern Native Renaissance

Today, Vanilla CSS is undergoing a massive renaissance. Browser vendors have implemented native solutions for nearly everything that used to require SASS or complex JavaScript:

• CSS Custom Properties (Variables): --primary-color: blue; replaced SASS variables, with the added superpower that they can be updated dynamically via JavaScript in real-time.
• Native Nesting: Modern browsers now natively support SCSS-style nesting without needing a build step.
• Flexbox and CSS Grid: Replaced complex float-based layouts and heavy JavaScript masonry libraries.
• The :has() Selector: The elusive “Parent Selector.” You can now style a parent element based on its children (e.g., div:has(> img)).

Because native CSS is now so incredibly powerful, many developers are abandoning SASS entirely in favor of Vanilla CSS or lightweight utility frameworks.

Interactive Box Model Explorer

At the heart of all CSS layout is the Box Model. Understand this, and you understand CSS. Experiment below to see how Content, Padding, Border, and Margin interact to determine an element’s total footprint on the page.