Retour au cours

Lesson 4: Linking CSS: Internal Stylesheets

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

4. Linking CSS: Internal Stylesheets

The second method for linking CSS is using an Internal Stylesheet, also known as Embedded CSS.

How Internal Stylesheets Work

Internal styles are defined within the <style> element placed inside the <head> section of your HTML document.

html

<!DOCTYPE html> <html> <head> <title>Internal Stylesheet Example</title> <style> /* CSS Rulesets go here */ body { background-color: lightblue; } h1 { text-align: center; color: navy; } </style> </head> <body> <h1>My Internal Styled Page</h1> <p>The entire page is styled using the rules defined above.</p> </body> </html>

Pros and Cons

Pros:

  • Quick and Easy: Convenient for styling a single HTML page quickly.
  • Less HTTP Requests: No separate file needs to be downloaded by the browser.

Cons:

  • Not Scalable: If your website has multiple pages (which most do), you would have to copy and paste the <style> block into the <head> of every single page. If you need to update a style, you must change it everywhere.
  • Increased HTML File Size: The size of the HTML file grows significantly with the CSS code.

Best Use Case: Small, single-page experiments or demonstrations where external resources are inconvenient.