HTML Internal CSS

Internal CSS is a method of adding CSS styles directly to an HTML document using the <style> element. It allows you to control the appearance of headings, paragraphs, buttons, backgrounds, and other webpage elements without creating a separate CSS file.

Internal CSS is useful when you want to style a single webpage or create a small website example. Understanding it also helps you learn how CSS rules work before moving on to external stylesheets.

What Is Internal CSS?

Internal CSS means writing CSS rules inside a <style> element, usually placed within the <head> section of an HTML document.

Here is a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS Example</title>

  <style>
    h1 {
      color: blue;
    }

    p {
      font-size: 18px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Welcome to Web4Learners</h1>
  <p>Learn HTML and CSS with simple examples.</p>
</body>
</html>

In this example, the CSS rules make the heading blue and display the paragraph in dark text with an 18-pixel font size.

If you are new to HTML, explore our guide to HTML elements and attributes to understand how webpage elements are structured.

Internal CSS Syntax

The basic syntax of internal CSS is:

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

The <style> element contains CSS rules. Each rule includes a selector and one or more declarations.

• Selector: Identifies the HTML elements you want to style.
• Property: Specifies what you want to change, such as color or font-size.
• Value: Defines the style, such as red or 20px.

For example:

<style>
  h2 {
    color: green;
    text-align: center;
  }
</style>

This rule makes all <h2> headings green and centers their text.

How to Add Internal CSS to HTML

Follow these steps to apply internal CSS to a webpage.

• Create an HTML document.
• Add the <head> element.
• Insert a <style> element inside the head.
• Write your CSS rules inside the style element.
• Add the HTML content you want to style inside the body.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Webpage</title>

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

    h1 {
      color: #1769aa;
      text-align: center;
    }

    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Learn Web Development</h1>
  <p>Internal CSS makes it easy to style a single HTML page.</p>
</body>
</html>

Save the file as index.html and open it in a web browser to view the result.

Common Internal CSS Examples

Change Text Color

Use the color property to change text color.

<style>
  p {
    color: purple;
  }
</style>

Change Background Color

Use background-color to set an element’s background.

<style>
  body {
    background-color: #f5f5f5;
  }
</style>

Style a Button

You can use internal CSS to make buttons more attractive.

<style>
  button {
    background-color: #1769aa;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

You can combine these rules with CSS classes to apply the same design to selected elements instead of styling every element of a particular type.

Advantages of Internal CSS

Internal CSS offers several benefits:

• Keeps CSS rules within the HTML document.
• Makes it easy to style a single webpage.
• Does not require a separate stylesheet.
• Supports CSS selectors, classes, IDs, and media queries.
• Is convenient for learning and testing styles.

Disadvantages of Internal CSS

Internal CSS also has some limitations:

• Styles are generally limited to the document containing them.
• Reusing styles across multiple pages requires duplicating the CSS.
• Large style sections can make HTML files harder to maintain.
• Separate CSS files may be cached by browsers and reused across pages, while internal styles are downloaded with each HTML document.

For websites with multiple pages, external CSS is often a more maintainable solution.

Internal CSS vs. Inline CSS vs. External CSS

Feature	Internal CSS	Inline CSS	External CSS
Location	<style> element	HTML style attribute	Separate CSS file
Scope	One document	Individual elements	Any linked document
Reusability	Limited across pages	Limited	High
Maintenance	Suitable for small pages	Difficult at scale	Easier for larger projects

You can also learn about HTML and CSS to understand how these technologies work together.

Frequently Asked Questions

Where should internal CSS be written?

Internal CSS is usually written inside a <style> element in the HTML document’s <head> section.

Can internal CSS style multiple elements?

Yes. You can create multiple CSS rules to style different elements throughout the same HTML document.

Can I use classes and IDs with internal CSS?

Yes. Internal CSS supports class selectors, ID selectors, element selectors, and many other CSS selectors.

Is internal CSS better than external CSS?

Internal CSS is convenient for a single page or a small demonstration. External CSS is usually better for larger websites because it supports reuse and easier maintenance.

Final Thoughts

Internal CSS lets you style a webpage by placing CSS rules inside its HTML document. It is useful for learning CSS and designing individual pages. As your website grows, consider moving reusable styles into an external stylesheet to keep your code organized and easier to update.