The first week of The CSS Codex was about laws.
Not suggestions. Not habits. Not tricks passed from developer to developer in dimly lit forums at two in the morning. Laws.
CSS is often described as simple, yet many developers experience it as unpredictable. A rule is written. The browser refreshes. The result is something completely different from what was expected. A color refuses to change. A margin disappears. A layout bends in ways that seem impossible to explain.
In those moments CSS can feel like wild magic.
But wild magic is simply what structured systems look like before their rules are understood.
Week 1 focused on revealing those rules. The goal was to replace confusion with structure and replace guesswork with knowledge.
Every developer who works with CSS eventually discovers that the browser is not casually applying styles. It is operating a decision engine. Each declaration is examined, compared, and judged according to a strict hierarchy of rules.
Those rules form the laws of the realm.
The Cascade: The Tribunal of Styles
Part I examined the cascade, which acts as the governing authority of CSS.
When multiple declarations attempt to control the same element, the browser does not choose randomly. It evaluates each rule according to a layered system that includes origin, importance, specificity, and source order.
Think of the cascade as a tribunal in a great hall of stone. Declarations arrive with arguments. The tribunal evaluates their authority and determines which rule holds power.
Consider the following example.
p {
color: blue;
}
.article p {
color: red;
}Both declarations target paragraph elements. The browser must decide which one governs the element.
The second rule carries greater specificity because it targets paragraphs inside an element marked with the class article. The tribunal recognizes that the second rule has greater authority and applies the red color.
Once the cascade is understood, CSS begins to feel less mysterious. Developers can predict which rule will win before the page is refreshed.
The first law of the realm becomes clear. CSS is not chaotic. It is lawful.
Specificity: The Dungeon Beneath the Castle
Part II descended into the system that gives the cascade its sense of hierarchy.
Specificity acts as a scoring system that determines how selectors compete. Each selector earns weight depending on the components it contains. ID selectors carry tremendous influence. Class selectors and attributes follow. Element selectors carry the least authority.
The browser compares these weights when rules conflict.
Observe the following example.
button {
background: gray;
}
.container button {
background: blue;
}
#primary button {
background: green;
}Three declarations compete to control the same button element.
The rule containing the ID selector holds the greatest authority. The browser therefore applies the green background defined by the final rule.
Specificity becomes dangerous when developers attempt to overpower existing styles by stacking selectors together. Each new rule grows longer in an attempt to defeat the previous one.
Soon the stylesheet begins to resemble a fortress wall built from layers of selectors.
.page .content .section .card button {
background: red;
}At that moment the dungeon doors close.
Every override requires an even heavier selector. Maintenance becomes difficult. New developers entering the codebase feel as if they are navigating tunnels beneath an ancient castle where every passage leads to another trap.
Escaping the specificity dungeon requires discipline. Strong CSS architecture depends on restraint rather than escalating selector power.
When CSS Appears to Be Wild Magic
Part III explored the emotional moment that every developer eventually encounters.
Something unexpected happens on the page. A layout moves after a small adjustment. A margin collapses in a place where no margin should exist. A rule that seems perfectly valid produces no visible result.
Without an understanding of the systems involved, these moments resemble magical chaos.
Yet CSS operates within a collection of interacting mechanics. The cascade determines which declarations apply. Specificity compares selectors. The box model defines how space is calculated. Normal flow determines how elements naturally arrange themselves.
When these systems intersect, the outcome may appear mysterious. In reality the browser is simply following the rules it was designed to obey.
Once those rules become visible, the illusion of magic fades.
CSS begins to behave less like an unpredictable spellbook and more like a well studied arcane discipline.
The Foundation of the Codex
Week 1 did not focus on layout tricks or visual flourishes.
It focused on understanding the machinery underneath every CSS system.
Developers who ignore these mechanics often feel as though they are battling their own stylesheets. They add more rules, increase specificity, and sometimes summon the most dangerous incantation in the language.
The declaration known as important.
Yet most of those battles disappear once the underlying laws are understood.
The cascade decides which declarations apply. Specificity determines how selectors compete. The browser follows these laws with quiet consistency.
Once those laws become visible, the entire landscape of CSS begins to make sense.
The Journey Continues: Week 2 Mastering the Terrain
If Week 1 revealed the laws of the realm, Week 2 begins exploring the land those laws govern.
The focus now shifts from rule systems to layout systems.
Many developers approach layout as an experiment. Elements are moved until the page appears correct. When something breaks, another adjustment is made.
This approach works for small projects but quickly becomes unreliable when systems grow larger.
Layout should not feel like guesswork.
It should feel like strategy.
Week 2 introduces three key ideas that shape nearly every layout on the web.
Part IV: The Default Terrain of Normal Flow
Every web page begins with normal flow.
Before Flexbox, Grid, or positioning systems alter the structure of a page, elements follow a simple set of rules that determine how they stack and occupy space.
Block elements build vertical structure. Inline elements flow within lines of text. The box model defines the space each element occupies.
Understanding normal flow is similar to studying the geography of a new continent. Rivers, mountains, and valleys shape how travelers move across the land.
Many layout problems vanish once a developer understands the natural behavior of this terrain.
Part IV explores that terrain in detail.
Part V: Three Layout Tactics for One Battlefield
Once the terrain is understood, strategy becomes possible.
Most layouts can be constructed using several different approaches. A developer may rely on floats, positioning, Flexbox, or other layout systems to achieve similar results.
The important question is not which technique works.
The important question is which technique is appropriate.
Part V compares three core layout tactics and examines how each behaves when placed on the same battlefield. Developers learn how to choose a strategy instead of relying on improvisation.
Part VI: Flexbox Is Not a Shortcut Spell
Flexbox has become one of the most widely used layout systems in modern CSS.
Unfortunately it is often treated as a shortcut spell that instantly solves alignment problems. Developers learn a few properties and begin applying Flexbox to every situation.
While Flexbox is powerful, it is not magic.
It is a system with rules, behaviors, and constraints. When understood properly it becomes one of the most reliable tools available for layout design.
Part VI explores Flexbox as a deliberate tool rather than a quick solution.
The Map Begins to Form
The first week of the Codex revealed the laws that govern CSS. The cascade, specificity, and layout mechanics are no longer hidden behind confusion.
Week 2 begins the next phase of the journey.
Now that the rules of the realm are understood, the task becomes learning how to navigate the terrain itself. Developers begin to see layouts not as fragile constructions but as strategic decisions shaped by the structure of the page.
The Codex continues.
The laws are known.
The terrain awaits exploration.
