Retour au cours

Lesson 5: Linking CSS: External Stylesheets (Best Practice)

**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.)*

5. Linking CSS: External Stylesheets (Best Practice)

The most professional and scalable way to manage CSS is using an External Stylesheet. This involves creating a separate .css file and linking it to the HTML document.

How External Stylesheets Work

  1. Create the CSS File: Create a file (e.g., styles.css) containing only your CSS rulesets.

    styles.css css body { font-family: 'Helvetica', sans-serif; line-height: 1.6; } .container { width: 80%; margin: 0 auto; }

  2. Link in HTML: Use the <link> element inside the HTML <head> section to connect the files.

    index.html html

    External Styling is Best

Understanding the <link> Tag

  • rel="stylesheet": Defines the relationship between the HTML file and the linked file (it's a stylesheet).
  • href="styles.css": Specifies the path to the CSS file.

Why External is Best

  • Separation of Concerns: Keeps HTML clean and focused on structure.
  • Maintenance: Change a style in one central .css file, and the changes apply instantly across every page linked to it.
  • Caching: Browsers can cache the external CSS file, meaning subsequent pages load faster because the style information is already stored locally.