What is the difference between inline styles, internal , and external stylesheets?

Inline styles (style attribute) apply to a single element and have the highest specificity but are hard to maintain and can't be cached. Internal in applies to the whole page but isn't reusable across pages. External stylesheets ( ) are cacheable, reusable across pages, and keep concerns separated — the recommended approach for production.

HTML/CSSBeginner#css#fundamentals

What is the difference between inline styles, internal <style>, and external stylesheets?

Inline styles (style attribute) apply to a single element and have the highest specificity but are hard to maintain and can't be cached. Internal <style> in <head> applies to the whole page but isn't reusable across pages. External stylesheets (<link>) are cacheable, reusable across pages, and keep concerns separated — the recommended approach for production.

Example

<link rel="stylesheet" href="styles.css">
<style>.local { color: red; }</style>
<p style="color: blue;">Inline</p>

What is the difference between inline styles, internal <style>, and external stylesheets?

Related Questions

What is the universal selector (*) and what are its performance implications?

How do you style form validation states using CSS pseudo-classes?

What is the difference between rem-based spacing scale and arbitrary pixel values in design systems?