How to Befriend HTML?

There are three main ways to integrate styles. The choice affects performance and code maintainability.

1. External Styles — Gold Standard

You create a separate file (e.g., style.css) and link it in the <head> section.

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

Pros: Browser caching (file loads once and stays in memory), separation of concerns, clean HTML.
Cons: Additional HTTP request (though in the HTTP/2 era this is not a problem).

2. Internal Styles

Styles are written inside the <style> tag.

<style>
  .hero-section { background: #f0f0f0; }
</style>

When to use: For quick prototypes or Critical CSS (styles needed to render the first screen so the user doesn't see a " blank sheet " while loading).

3. Inline Styles — Anti-pattern

Styles are written via the style attribute directly in tags.

<h1 style="color: var(--brand-color); margin: 0;">Hello!</h1>

Warning

Avoid this method! It has maximum priority and is extremely difficult to override through the main CSS file. This leads to the so-called " specificity hell. "

Comparison:

Professional tip: Always strive for external files. Use CDN for popular libraries (e.g., Bootstrap) to speed up loading for users who already have these files in cache.