Internal CSS

Last Updated : 7 Aug 2026

Internal CSS is a method of adding CSS to a single HTML document. The CSS rules are written inside the <style> tag, which is placed within the <head> section of the HTML document.

In this chapter, you will learn what Internal CSS is, its syntax, how to use it, examples of Internal CSS, and its advantages and disadvantages.

What is Internal CSS?

Internal CSS is used to apply styles to a single HTML document. All CSS rules are written inside the <style> element, which is placed within the <head> section of the HTML page.

Unlike Inline CSS, where styles are applied to individual elements, Internal CSS allows multiple HTML elements to share the same set of CSS rules. This makes the HTML code cleaner and easier to maintain for a single web page.

Syntax of Internal CSS

The following syntax is used to add Internal CSS to an HTML document.

<head>
    <style>
        selector {
            property: value;
        }
    </style>
</head>

In this syntax:

<head> contains metadata and CSS for the HTML document.
<style> is used to write CSS rules.
selector specifies the HTML element to be styled.
property defines the CSS property.
value specifies the value of the CSS property.

Example of Internal CSS

The following example demonstrates how to use Internal CSS in an HTML document.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: red;
    margin-left: 80px;
} 
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
</html>

Execute Code

Explanation

In this example:

The body selector changes the page background color to linen.
The h1 selector changes the heading color to red and adds a left margin of 80 pixels.
The paragraph remains unchanged because no CSS rule is defined for the <p> element.

Styling Multiple Elements

One of the main advantages of Internal CSS is that a single CSS rule can style all matching HTML elements on the page.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    color: blue;
}

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

<body>

<h2>Learning CSS</h2>

<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

</body>
</html>

Explanation

The h2 selector styles every <h2> element, while the p selector styles every paragraph in the document.

Using Class and ID Selectors

Internal CSS can also style elements using class and id selectors.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
    color: orange;
}

#title {
    color: purple;
}
</style>
</head>

<body>

<h2 id="title">CSS Tutorial</h2>

<p class="highlight">This paragraph is highlighted.</p>

<p>This paragraph uses the default style.</p>

</body>
</html>

Explanation

The id selector (#title) styles the heading.
The class selector (.highlight) styles the first paragraph.
Elements without a matching selector remain unchanged.

When to Use Internal CSS

Internal CSS is suitable when:

A single HTML page requires its own styles.
The styles are not shared with other web pages.
You want to keep the CSS and HTML together in one file.
A small project or demonstration page is being created.

Example

<style>
table {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 8px;
}
</style>

Explanation

The CSS rules are applied only to the current HTML page. Any other HTML page will not use these styles unless the same rules are added to its <style> section.

Advantages of Internal CSS

Styles are defined at a single place within the HTML document.
The same CSS rules can be applied to multiple elements.
HTML code becomes cleaner than using Inline CSS repeatedly.
Suitable for styling a single web page.
Supports all CSS selectors, including classes, IDs, pseudo-classes, and pseudo-elements.

Disadvantages of Internal CSS

Styles cannot be shared across multiple HTML pages.
Every page requires its own <style> section.
Repeating the same CSS in multiple pages increases maintenance effort.
Browser caching benefits are not available as with External CSS.

Next TopicExternal CSS

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.