Internal CSS

Internal CSS

Internal CSS places CSS rules inside a <style> element in an HTML document. The styles apply to that page and can be used to style multiple HTML elements without repeating a style attribute on each element.

Using Internal CSS

Internal CSS is written inside a <style> element. The <style> element is normally placed inside the <head> of the HTML document.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled Document</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        padding: 12px;
      }
      p {
        color: blue;
      }
    </style>
  </head>
  <body>

    <p>This paragraph is blue.</p>

  </body>
</html>

The CSS rule selects the <p> element and changes its text color to blue.

The <style> Element

The <style> element contains CSS rules that apply to the current HTML document.

<style>
  p {
    color: blue;
  }
</style>

Unlike inline CSS, these rules include selectors because the browser needs to know which HTML elements should receive the styles.

For internal CSS, place the <style> element inside the document's <head>.

Styling Multiple Elements

One internal stylesheet can contain rules for different HTML elements.

<style>
  h1 {
    color: #0088cc;
  }

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

The first rule styles <h1> elements, while the second rule styles <p> elements.

A single rule can also apply to every matching element on the page. For example:

p {
  color: blue;
}

Every <p> element on that page will receive the blue text color unless another applicable CSS rule overrides it.

Internal CSS vs Inline CSS

Inline CSS places styles directly on an individual HTML element:

<p style="color: blue;">First paragraph.</p>
<p style="color: blue;">Second paragraph.</p>

With internal CSS, the style can be written once:

<style>
  p {
    color: blue;
  }
</style>

The HTML can then remain focused on the content:

<p>First paragraph.</p>
<p>Second paragraph.</p>

This makes repeated styles easier to change because the CSS can be updated in one location.

When Internal CSS is Useful

Internal CSS can be useful when a page needs styles that are used only on that page. It also provides a simple way for beginners to practice CSS while keeping the HTML and CSS together in one document.

When the same styles are needed across several pages, an external stylesheet is usually more practical because one CSS file can be shared by all of those pages.

Summary

Internal CSS is written inside a <style> element, normally located in the <head> of an HTML document. Its CSS rules can style multiple elements throughout that page without adding a style attribute to each element.

Internal CSS is useful for styles that belong to a single page. Next, you will learn how external CSS moves those rules into a separate stylesheet that can be shared by multiple HTML pages.