Using Internal CSS Stylesheets: Styling Individual HTML Pages

Learn how to apply CSS styles to individual HTML pages using internal stylesheets. This tutorial explains the method of embedding CSS within the `<style>` tag, its advantages (simplicity for single pages), limitations (lack of reusability), and comparison to external stylesheets. Master basic CSS implementation techniques.

Using Internal CSS Stylesheets

What is Internal CSS?

Internal CSS is a method of adding CSS styles directly within an HTML document. This approach applies the styles only to that specific HTML file; it doesn't affect other pages on your website. Internal stylesheets are defined within the <style> tag, which is typically placed inside the <head> section of the HTML document.

Example: Applying Internal CSS Styles

Here's a simple example of how to include internal CSS. Note that the styles defined within the <style> tags only affect the elements on that HTML page.

HTML Code


<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    h1 {
      color: blue; /* Styles only apply to this page */
    }
  </style>
</head>
<body>
  <h1>The internal style sheet is applied on this heading.</h1>
  <p>This paragraph will not be affected.</p>
</body>
</html>

In this example, the `h1` elements on this specific page will be styled with blue text.