CSS Internal Stylesheet

An internal stylesheet places your CSS inside a <style> block in the page's <head>, which is handy when the styles apply to just one page.

What internal CSS is

Internal CSS lives directly in the HTML document, inside a <style> element placed within the <head>. The rules written there apply only to that single page. It keeps the styling together in one spot without needing a separate file.

A style block

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f7f7f7;
    }
    p {
      color: #333;
    }
  </style>
</head>
<body>

</body>
</html>

When to use it

Internal styles suit a one-off page whose look does not need to be shared, or a quick demo where a separate file would be overkill. For anything spanning multiple pages, an external stylesheet is the better choice.

  • Good for a single page with unique styling
  • Useful for prototypes and small experiments
  • Keeps everything in one file, so nothing extra to load

The trade-off

Because the rules are locked inside one document, you cannot reuse them elsewhere. If you copy the page, you copy the styles too, and keeping several copies in sync quickly becomes tedious.

Note: The <style> element belongs in the <head>. Placing it in the body still works in most browsers but is not valid and can cause a flash of unstyled content.

For site-wide styling, move these rules into an external stylesheet.

Keep Going

CSS Interview QuestionsPractice real questions asked for CSSFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to CSS and tweak your resume