Inline CSS is styling applied directly to an individual HTML element using the `style` attribute, rather than through a separate stylesheet. It affects only that one specific element, and takes priority over both internal and external stylesheets.
An Example
`<p style="color: red; font-size: 18px;">` applies red text at 18 pixels to that single paragraph alone, with no effect on any other element on the page.
When Inline CSS Actually Makes Sense
- Quick, one-off styling tweaks that don't need to be reused elsewhere
- Email templates, since many email clients strip out external stylesheets entirely
- Dynamically generated styles, applied on the fly through JavaScript
Why It's Generally Best Avoided at Scale
- Makes a site considerably harder to maintain, since styles are scattered across countless individual elements
- Prevents reusing consistent styles across multiple elements
- Bloats HTML, since styling is repeated instead of centralized in one place
- Overrides other CSS in ways that can make debugging genuinely difficult
The General Rule
For anything beyond a very small, one-off tweak, a proper stylesheet — whether a theme file, a child theme, or the Additional CSS box in the WordPress Customizer — is almost always the better, more maintainable choice.
« Back to Index