Add Internal CSS

What is Internal CSS?

Internal CSS is a method of styling a web page by writing CSS rules inside the <style> element within the <head> section of an HTML document. The styles apply only to that single HTML page, making Internal CSS useful when a webpage requires unique styling that is not shared with other pages.

Why Use Internal CSS?

Internal CSS is ideal for styling a single webpage without creating a separate CSS file. It keeps all HTML and CSS in one document, making it convenient for small websites, testing layouts, creating prototypes, and learning CSS. Since the styles remain inside the HTML file, they only affect that specific page.

Syntax of Internal CSS

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

Step 1: Add the <style> Tag

Inside the <head> section of your HTML document, create a <style> element. This is where all CSS rules for the page will be written.

<head>

<style>

body{
    background:#f4f4f4;
}

</style>

</head>

Step 2: Write CSS Rules

After creating the <style> element, write your CSS rules inside it. The browser reads these rules and applies them to the matching HTML elements on the same page.

<style>

body{
    background:#eef7ff;
}

h1{
    color:#0066cc;
}

p{
    color:#333;
    font-size:18px;
}

</style>

How Internal CSS Works

When the browser loads an HTML document, it reads the CSS rules inside the <style> element before rendering the page. These styles are applied only to the current HTML document and do not affect other webpages.

Example of Internal CSS

<!DOCTYPE html>
<html>
<head>

<style>

body{
    background:#f5f9ff;
    font-family:Arial, sans-serif;
    text-align:center;
    margin-top:50px;
}

h1{
    color:#0056b3;
}

p{
    color:#444;
    font-size:18px;
}

button{
    background:#007BFF;
    color:white;
    border:none;
    padding:10px 20px;
    font-size:16px;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    background:#0056b3;
}

</style>

</head>
<body>

<h1>Welcome to Academic Block</h1>

<p>This webpage is styled using Internal CSS.</p>

<button>Click Me</button>

</body>
</html>

Advantages of Internal CSS

Single File

Easy Management

HTML and CSS remain in one document.

Quick Testing

Fast Development

Perfect for learning, testing, and prototypes.

Page Specific

No Side Effects

Styles affect only the current webpage.

No External File

Simple Setup

No need to create or link a separate CSS file.

Easy Debugging

Quick Changes

CSS can be modified directly within the HTML page.

Common Mistakes

Beginners often place the <style> element inside the <body>, forget the opening or closing <style> tag, write invalid CSS syntax, or accidentally use multiple conflicting CSS rules. These mistakes may prevent styles from working correctly.

<!-- Incorrect -->

<body>

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

</body>


<!-- Correct -->

<head>

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

</head>

Best Practices

Always place the <style> element inside the <head> section.
Keep CSS properly indented for better readability.
Group related CSS rules together.
Use comments to organize large stylesheets.
Avoid repeating the same CSS rules.
Use meaningful class names whenever possible.
Use Internal CSS for page-specific styling only.
Move reusable styles to an external stylesheet for large websites.

Web Resources on How to add Internal CSS?

1. MDN Web Docs : <display-internalgt; CSS type.
2. Dev.to : Inline, Internal, and External CSS Explained.
3. Dev.to : Advantages and Disadvantages of Inline, Internal, and External Styles.
4. HTML Cheat Sheet.com : CSS syntax and how to include them in HTML.

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.