CssConceptBeginner · 3 min read

What is Internal CSS: Definition, Example, and Usage

Internal CSS is a way to add CSS styles directly inside an HTML document using the <style> tag within the <head> section. It lets you style a single HTML page without needing an external file.

⚙️

How It Works

Internal CSS works by placing style rules inside a <style> tag within the <head> part of an HTML page. Think of it like writing your outfit instructions on a sticky note and sticking it inside your closet door — the instructions only apply to that closet (page).

When the browser loads the page, it reads these style rules and applies them to the HTML elements on that page. This method keeps the styles close to the content, making it easy to see and change styles for that specific page without affecting others.

💻

Example

This example shows how to use internal CSS to change the background color and text style of a page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    body {
      background-color: #f0f8ff;
      font-family: Arial, sans-serif;
      color: #333333;
    }
    h1 {
      color: #005f73;
      text-align: center;
    }
    p {
      font-size: 1.2rem;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>Welcome to Internal CSS</h1>
  <p>This page uses internal CSS to style its content.</p>
</body>
</html>

Output

A webpage with a light blue background, a centered dark teal heading, and a paragraph with medium-sized dark text and margin around it.

🎯

When to Use

Internal CSS is useful when you want to style a single HTML page without creating a separate CSS file. It is great for quick testing, small projects, or when you want to keep everything in one file for simplicity.

For example, if you are making a simple landing page or a one-page resume, internal CSS keeps your styles organized and easy to manage. However, for larger websites with many pages, external CSS files are better to keep styles consistent and easier to update.

✅

Key Points

Internal CSS is placed inside a <style> tag within the HTML <head>.
It applies styles only to the page where it is written.
Good for small projects or single pages.
Not ideal for large sites because it repeats styles on every page.

✅

Key Takeaways

Internal CSS styles are written inside the