Open In App

Internal CSS

Last Updated : 18 Sep, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

What is Internal CSS ?

The Internal CSS stylesheet is a set of styles created as part of an HTML document. Internal CSS is a method for defining CSS styles within an HTML document’s <style> element, it is used to provide a unique style for a single HTML document in the <head> section. This means that the CSS is embedded within the <style> tag inside the <head> section of the HTML file.

How to Use Internal CSS ?

To use internal CSS, include CSS rules within a <style> tag inside the HTML document’s <head>. Define styles by selecting HTML elements or classes, and applying styling rules within the tag. All the changes done by the internal CSS can be applied only to a single web page.

Syntax:

<style>
/* Internal CSS starts here */
</style>

 

Example: Here is the basic example of using internal CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Internal CSS</title>
    <style>
        /* Internal CSS  */
        h1 {
            color: green;
            font-size: 50px;
            text-align: center;
        }
  
        p {
            color: blue;
            font-size: 25px;
            line-height: 1.5;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <p>A Computer Science Portal..!</p>
</body>
  
</html>


Output:

chrome-capture-2023-6-27

Example 2: In this example, we are using internal CSS to style a page with a green heading, a blue paragraph, and a centered red button that changes color on hover. The button also includes a link to the GeeksforGeeks website.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Internal CSS</title>
    <style>
        /* Internal CSS starts here */
        h1 {
            color: green;
            text-align: center;
            font-size: 50px;
        }
  
        p {
            font-size: 25px;
            color: blue;
            text-align: center;
        }
  
        .container {
            text-align: center;
        }
  
        .btn {
            background-color: red;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            text-decoration: none;
        }
  
        .btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <p>A Computer Science Portal..!</p>
    <div class="container">
        <a href="https://www.geeksforgeeks.org/" 
           class="btn">Click Me</a>
    </div>
</body>
  
</html>


Output:

internal-css

Advantages of Internal CSS

  • Internal CSS retains styles in the HTML file, avoiding conflicts with other pages and making easier management of styles at the local level.
  • Internal CSS has higher specificity than external CSS, which allows you to override external styles more easily within the same HTML file.
  • Internal CSS reduces HTTP requests, enhancing performance.
  • Internal CSS is relatively easy to implement, we can use class and ID selectors in this style sheet.

Disadvantages of Internal CSS

  • Repetition in HTML files.
  • Increased file size.
  • Reduced code reusability.
  • Limited style management across pages.


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads