Dibya Web

How to Add Internal CSS in HTML – Easy Step-by-Step Guide

Learn how to add internal CSS in HTML with simple steps, examples, syntax, benefits, and common mistakes explained for beginners.

How To Add Internal CSS – A Complete Beginner-Friendly Guide

CSS (Cascading Style Sheets) is what makes a website look beautiful.
Colors, fonts, spacing, layouts—everything visual is controlled by CSS.

Among the different ways to use CSS, Internal CSS is one of the most important and beginner-friendly methods.

In this article, you’ll learn:

  • What Internal CSS is
  • Why and when to use it
  • How to add Internal CSS step by step
  • Real examples
  • Advantages and disadvantages
  • Common mistakes
  • Best practices
  • Internal CSS vs Inline and External CSS

Let’s dive in

What Is Internal CSS?

Internal CSS is a method of adding CSS styles inside the <style> tag, which is placed within the <head> section of an HTML document.

The styles written using Internal CSS apply only to that specific page, not the entire website.

Simple Definition

Internal CSS means writing CSS inside the HTML file itself using the <style> tag.

Where Is Internal CSS Written?

Internal CSS is always written:

  • Inside the <head> tag
  • Within a <style> block

Basic Structure

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS code goes here */
    </style>
</head>
<body>
    <!-- HTML content -->
</body>
</html>

Why Use Internal CSS?

Internal CSS is very useful in many situations, especially for small projects and single pages.

Key Reasons to Use Internal CSS

  • To style one specific web page
  • For testing and learning CSS
  • When you don’t want to create a separate CSS file
  • For email templates or demo pages
  • When page-specific styles are required

How To Add Internal CSS – Step-by-Step

Let’s learn this step by step.

Step 1: Create a Basic HTML File

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

At this stage, the page has no styling.

Step 2: Add the <style> Tag Inside <head>

Now add the <style> tag:

<head>
    <title>Internal CSS Example</title>
    <style>
        
    </style>
</head>

Step 3: Write CSS Rules Inside <style>

Now add CSS rules inside the <style> block.

<style>
    body {
        background-color: #f4f4f4;
        font-family: Arial, sans-serif;
    }

    h1 {
        color: blue;
        text-align: center;
    }

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

Final Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: blue;
            text-align: center;
        }

        p {
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph styled using Internal CSS.</p>
</body>
</html>

You have successfully added Internal CSS.

How Internal CSS Works

  • The browser reads the HTML file
  • It finds the <style> tag inside <head>
  • CSS rules are applied to matching HTML elements
  • Styles affect only this page

Internal CSS Syntax Explained

A CSS rule has three main parts:

selector {
    property: value;
}

Example

h1 {
    color: red;
}
  • Selector: h1
  • Property: color
  • Value: red

Styling Multiple Elements Using Internal CSS

You can style multiple elements at once.

h1, h2, h3 {
    color: green;
}

Using Classes in Internal CSS

Classes allow reusable styles.

HTML

<p class="highlight">Important text</p>

Internal CSS

.highlight {
    background-color: yellow;
    padding: 10px;
}

Using IDs in Internal CSS

IDs are used for unique elements.

HTML

<div id="main-box">Content</div>

Internal CSS

#main-box {
    border: 2px solid black;
    padding: 20px;
}

Internal CSS vs Inline CSS vs External CSS

FeatureInternal CSSInline CSSExternal CSS
LocationInside <style>Inside HTML tagSeparate .css file
ScopeOne pageOne elementEntire website
ReusabilityMediumVery lowHigh
Best forSingle pagesQuick fixesLarge websites

Advantages of Internal CSS

  • Easy to learn and use
  • No extra CSS file needed
  • Good for small projects
  • Faster setup
  • Page-specific styling
  • Clean compared to inline CSS

Disadvantages of Internal CSS

  • Not reusable across pages
  • Increases HTML file size
  • Hard to manage large projects
  • Not ideal for SEO-heavy websites
  • Poor scalability

When Should You Use Internal CSS?

Use Internal CSS when:

  • You’re learning HTML & CSS
  • Styling a single page
  • Creating demo or test pages
  • Making landing pages
  • Applying page-specific styles

Avoid it for:

  • Large websites
  • Multi-page projects
  • Performance-critical sites

Common Mistakes While Using Internal CSS

  • Writing <style> outside <head>
  • Forgetting closing braces }
  • Using inline styles unnecessarily
  • Mixing too much CSS in one page
  • Overusing IDs instead of classes

Best Practices for Internal CSS

  • Keep CSS well-organized
  • Use comments for clarity
  • Prefer classes over IDs
  • Avoid duplicate styles
  • Use meaningful class names
  • Switch to External CSS as project grows

Example with Comments

/* Page background */
body {
    background-color: #ffffff;
}

/* Main heading */
h1 {
    color: #222;
}

Can You Use Internal and External CSS Together?

Yes, you can.

Priority Order (Highest to Lowest):

  1. Inline CSS
  2. Internal CSS
  3. External CSS
  4. Browser default styles

Internal CSS will override External CSS if selectors have the same priority.

Is Internal CSS Good for SEO?

Internal CSS:

  • Does not directly harm SEO
  • But large inline styles can slow page loading
  • External CSS is better for performance and scalability

For small pages, Internal CSS is perfectly fine.

Real-World Example Use Cases

  • Single landing page
  • HTML email templates
  • Personal portfolio page
  • Exam or practice projects
  • WordPress custom page templates (limited styling)

Final Thoughts

Internal CSS is one of the best ways to start learning CSS.
It sits perfectly between Inline CSS and External CSS.

Remember:

  • Simple
  • Page-specific
  • Beginner-friendly
  • Not suitable for large websites

Once your project grows, move to External CSS for better performance and maintainability.

Frequently Asked Questions (FAQ)

1. What is Internal CSS in HTML?

Internal CSS is a method of adding CSS styles inside the <style> tag within the <head> section of an HTML document. It applies styles to a single page only.

2. Where do we write Internal CSS?

Internal CSS is written inside the <style> tag, which is placed within the <head> section of an HTML file.

3. What is the advantage of Internal CSS?

Internal CSS is easy to use, ideal for single-page styling, and does not require a separate CSS file, making it beginner-friendly.

4. What is the difference between Internal CSS and Inline CSS?

Internal CSS styles an entire page using a <style> block, while Inline CSS styles a single HTML element using the style attribute.

5. Is Internal CSS good for large websites?

No, Internal CSS is not recommended for large websites. External CSS is better for performance, reusability, and maintenance.