CSS How To
In this page:
Inline CSS
Inline CSS is written directly inside an element's style attribute, applying only to that one specific element and nowhere else. Because it overrides both internal and external CSS, inline styles are generally discouraged except for quick tests or dynamically generated styles.
Note: Inline CSS is handy for quick experiments or one-off tweaks, but it doesn't scale well across a whole site.
Warning: Inline styles override almost everything else by default, which can make bugs confusing if you forget one is quietly present.
Example: Inline CSS
<p style="color: red;">Styled with an inline style attribute</p>Internal CSS
Internal CSS is written inside a style tag placed in the page's head. It applies only to that single HTML document, not to any other pages on the site. This approach is convenient for small, single-page projects but becomes hard to maintain once a site grows to multiple pages.
Note: Internal CSS is a good fit for a one-off landing page that doesn't need to share styles with the rest of a site.
Warning: Internal CSS has to be repeated on every page that needs it, which becomes repetitive and hard to keep consistent across a multi-page site.
Example: Internal CSS
<head>
<style>
p { color: blue; }
</style>
</head>External CSS
External CSS lives in its own .css file, completely separate from any HTML page, and is connected using a link tag. Any page that links to it shares the exact same styles. This is the recommended approach for real projects since it keeps styling centralized, cacheable, and reusable across an entire site.
Note: For any real, multi-page site, an external stylesheet is almost always the right choice, since one file styles the whole site.
Warning: If the href path in the link tag is wrong, the browser silently fails to load the stylesheet, and the page renders unstyled.
Example: External CSS
<link rel="stylesheet" href="styles.css">
<p>Styled by a separate .css file</p>Order of Precedence Between Methods
When the same element is styled by more than one method, inline CSS wins over internal and external CSS, and later rules generally win over earlier ones when specificity is otherwise equal.
Note: If a style you expect isn't showing up, check whether an inline style or a later rule elsewhere is quietly overriding it.
Warning: It's easy to forget an inline style exists on an element, which can make debugging 'my CSS isn't working' issues frustrating.
Example: Order of Precedence Between Methods
<head>
<style>
p { color: blue; }
</style>
</head>
<body>
<p style="color: red;">Inline wins over the internal style above</p>
</body>Choosing the Right Method
Pick the method that matches the scope of the change: inline for a single one-off tweak, internal for one self-contained page, and external for anything shared across multiple pages.
Note: When in doubt, default to an external stylesheet, it's the most maintainable choice for almost any real project.
Warning: Mixing all three methods heavily on the same project makes it much harder to predict which style will actually apply.
Example: Choosing the Right Method
<!-- One-off tweak: inline -->
<p style="color: red;">One-off</p>
<!-- Self-contained page: internal -->
<style>p.local { color: blue; }</style>
<p class="local">Internal</p>
<!-- Shared across pages: external -->
<link rel="stylesheet" href="styles.css">- Overusing inline styles across a whole site, which makes consistent design and later updates much harder.
- Forgetting that inline styles override internal and external CSS by default, causing confusing 'why isn't my CSS working' moments.
- Linking a stylesheet with the wrong file path, so none of the external CSS ever loads.
- Inline CSS is written directly on an element using the style attribute.
- Internal CSS lives inside a style tag in a single page's head and only affects that page.
- External CSS lives in its own .css file and can be shared across an entire site.
All three ways of adding CSS (inline, internal, external) are supported identically by every modern browser.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: