Internal stylesheet - CSS

Summary

HTML code:

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

Details

The style element allow you to add CSS code directly inside of your HTML file.

The style element is generally placed inside the head element, as in the example below.

Note: As a general rule, you should keep all of your CSS code in an external stylesheet and link it to your HTML files. You should only use the style element for quick testing of styles.

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    p {
      color: red;
    }
  </style>
</head>

Multiple style elements

It’s possible to have more than one style element in the head element. This might be useful if you want to group certain styles together.

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    p {
      color: red;
    }
  </style>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

Demo

Internal stylesheet demo

Exercises

First, recreate the CSS code from the code snippet. Then try changing the value for the property.

References

The Style Information element on MDN

Internal stylesheet – CSS