Internal CSS

The internal style sheet is used to add a unique style for a single document. It is also called Embedded CSS.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

An internal CSS is used to define a style for a single HTML page.

Internal styles apply to whole pages but not to multiple HTML documents.

Internal styles are relevant to one page only.

This CSS style is an effective method of styling a single page.

Contents hide
Example
Advantages of Internal CSS
Disadvantages of Internal CSS

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title>
    <!-- Below is a example of internal CSS -->
    <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>
Internal CSS Example – output

Advantages of Internal CSS

Since you will only add the CSS code within the same HTML file, you don’t need to upload multiple files.

Disadvantages of Internal CSS

Using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website.

Adding the code to the HTML document can increase the page’s size and loading time.