Back to course

Lesson 4: Linking CSS: Internal Stylesheets

CSS Mastery: From Zero to Hero in 100 Lessons

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

My Internal Styled Page

The entire page is styled using the rules defined above.

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.