CSS stands for Cascading Style Sheets. The “cascading” part means styles flow down through the page, and when two styles compete, the more specific one usually wins.
That idea is important when working with Tailwind, design tokens, and reusable components.
The short version: global styles set broad defaults, component styles set reusable defaults, and instance-level styles can override both.
Start with the tree
HTML is a tree. A page-level style starts high in that tree and flows into everything below it.
Hello World
In this tiny example, the <p> is inside the <div>, and the <div> is inside the <body>. A broad style on <body> can reach everything below it, but nothing flows back upward.
Styles flow downward
Styles applied to body can affect everything inside it.
But if something lower in the tree has its own style, that lower, more specific style wins.
Nested content
Try clicking the <div>. The <p> changes too because it sits inside the <div>. The <body> stays the same because it sits above the change. After you make a change, a reset button will appear.
Styles can flow down from ancestors, but a style set directly on a lower element wins for that element.
Components work the same way
Reusable components are another version of the same idea.
A component is a reusable chunk of UI. In this example, <ButtonComponent> is built from a real <button> internally, and the page uses that component in two places.
Changing the component itself changes the shared default for every instance. Changing one instance only affects that one usage.
Component definition
Page using the component
Click the <button> in the component definition. Both rendered buttons change because both page instances use that shared default.
Then click one <ButtonComponent> in the page tree. Only that instance changes. The other instance keeps following the component default.
- A component default color.
- An optional instance override color.
The component default is the shared baseline. The instance override is the lower, more specific choice.
Put it together
In a real page, global styles, sections, components, and individual elements all stack together.
Rendered example
Try changing a few different nodes. The rule of thumb stays the same: a broad choice applies to everything below it until a more specific choice appears lower in the tree.