There are exactly three ways to put CSS on a page, and they differ in where the rules live, how far they reach, and how the browser resolves conflicts between them. Every cascade question you will ever have comes down to these three.
What are the three ways?
An external stylesheet, an embedded <style> block, and an inline style attribute. All three can set the same property on the same element, and the browser always has the final say.
<!-- 1. external stylesheet: the normal way -->
<link rel="stylesheet" href="/css/site.css">
<!-- 2. embedded block: for one page only -->
<style>
.card { padding: 1rem; border: 1px solid #ddd; }
</style>
<!-- 3. inline attribute: for one element only -->
<p style="color: #800d4d;">This paragraph is styled individually.</p>
The external stylesheet is what almost every project uses. The embedded block is for a single page that genuinely needs its own rules, and the inline attribute is for a value that is set by code or is truly one-off — a progress bar width, a background colour chosen by the user.
Why does the external stylesheet usually win?
Not because it is more important, but because of the order they are considered in. The cascade resolves conflicting declarations in this sequence: later rules beat earlier rules when specificity ties, a more specific selector beats a less specific one, and a declaration with !important beats everything except another !important.
/* the page's stylesheet */
.card {
color: #222;
}
/* a rule inside the same page's