Internal CSS in HTML How to Add CSS Inside HTML with Example

Internal CSS

What is Internal CSS ?

Internal CSS allows you to define styles directly within the <style> tag in the <head> section of an HTML document.

It is best used when you want to style a single page and do not want to load an external stylesheet.

Syntax:

  <style>
    element {
      property: value;
    }
  </style>

element: The HTML tag to be styled (like body, h1, p, etc.)

property: The CSS property (like color, font-size, background-color, etc.)

value: The value to assign to the property

Key Point

Defined inside the <style> tag, within the <head> section.

Affects the entire document.

Overrides styles from external CSS, but not inline CSS.

Best for small or standalone web pages.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: powderblue;
    }

    h1 {
      color: blue;
    }

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

<body>

  <h1>Welcome to</h1>
  <p>Quipoin.</p>

</body>

</html>

Output:

When to Use Internal

CSS When styling only one webpage.

For quick tests or demos.

When you do not want to maintain a separate .css file.