Retour au cours

Lesson 3: Linking CSS: Inline Styles (Avoid Me!)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

3. Linking CSS: Inline Styles (Avoid Me!)

There are three primary ways to link CSS to an HTML document. The first, Inline Styles, applies styles directly to a specific HTML element using the style attribute.

How Inline Styles Work

Inline styles are written directly within the start tag of an HTML element.

html

This heading is styled inline

This paragraph has separate styling.

In the example above, the declaration block (the part inside the curly braces {}) is replaced by the content of the style attribute.

When to Use (and Avoid) Inline Styles

The Rule: Generally, avoid inline styles.

Inline styles mix presentation (CSS) with structure (HTML), violating the principle of separation of concerns. This makes your code hard to maintain, reuse, and debug.

Why they are problematic:

  1. Maintenance Nightmare: To change the color of all paragraphs, you would have to edit every single <p> tag.
  2. Specificity Issues: Inline styles have the highest level of specificity (we'll cover this soon), overriding almost all other CSS. This makes overriding them later extremely difficult.

The Only Exceptions (Rare):

  • When using JavaScript to dynamically calculate and set specific styles.
  • In certain email development scenarios where external sheets are poorly supported.