Internal CSS

Internal CSS places CSS rules directly inside an HTML document using the <style> element. The styles apply to the HTML document containing them.

Internal CSS can be useful when a webpage needs its own styles and those styles do not need to be shared with other pages.

The <style> Element

The <style> element contains CSS rules that the browser applies to the document.

<style>
h1 {
  color: blue;
}
p {
  color: #333333;
  font-size: 18px;
}
</style>

The CSS inside the <style> element uses the same selectors, properties, values, and declarations used in an external stylesheet.

Where Internal CSS Goes

For normal document styles, the <style> element is placed inside the HTML document's <head> element.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Internal CSS Example</title>
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>

    <h1>Learning Internal CSS</h1>

  </body>
</html>

Placing the styles in the document's <head> keeps the CSS separate from the page content while still keeping both the HTML and CSS in a single file.

When to Use Internal CSS

Internal CSS can be useful when styles are needed for only one HTML document. Because the CSS is stored directly in the document, no separate stylesheet file is required.

It can also be convenient for examples, demonstrations, testing, and small standalone pages where keeping the HTML and CSS together makes the file easier to work with.

For websites containing multiple pages that share the same design, an external stylesheet is usually easier to maintain because the shared CSS can be stored in one file.

Internal CSS vs. External CSS

Internal and external CSS use the same CSS syntax. The main difference is where the CSS rules are stored.

Internal CSS is stored inside a <style> element in the HTML document. External CSS is stored in a separate .css file and connected to the HTML document with a <link> element.

Internal CSS keeps page-specific styles with the document, while external stylesheets make it easier to share and maintain the same styles across multiple webpages.

Internal CSS Example

The following example uses a <style> element to add CSS directly to the HTML document.

<style>
h1 {
  color: blue;
}
p {
  color: #333333;
  font-size: 18px;
}
</style>

<h1>Internal CSS</h1>
<p>This paragraph is styled with internal CSS.</p>

Play in Editor

The browser reads the CSS rules inside the <style> element and applies them to the matching <h1> and <p> elements in the document.