Why external style sheets are preferred

CSS can be applied in three ways: inline (style="..." on an element), internal (a <style> block in the page), and external (a separate .css file linked with <link rel="stylesheet" href="style.css">).

Reasons for preferring external CSS

1. Reusability: one file styles every page of the site.
2. Easy maintenance: a change in one file updates the whole site instantly.
3. Separation of concerns: HTML holds structure and content, CSS holds presentation, so both stay cleaner and readable.
4. Faster loading through caching: the browser downloads the file once and caches it, so later pages load faster and use less bandwidth.
5. Consistency: a uniform look and feel across all pages.
6. Smaller HTML files: no repeated style code in each page.
7. Team work: designers edit CSS while developers edit HTML.
8. Media adaptability: different files or media queries can serve screen, print, or mobile.

Comparison

Type	Scope	Reuse	Maintenance
Inline	One element	None	Hard
Internal	One page	Single page	Moderate
External	Whole website	Full	Easy

<head>
  <link rel="stylesheet" href="styles/main.css">
</head>

Minor drawback: an extra HTTP request on the first load, and the page may briefly appear unstyled if the file fails to load. The benefits far outweigh this.