Home › HTML › Internal CSS

Internal CSS in HTML

Beginner ⏱ 6 min read Updated: Jul 2026
  • Internal CSS is a method of adding CSS styles inside an HTML document.
  • Internal CSS is written inside the <style> tag.
  • The <style> tag is placed inside the HTML <head> section.
  • Internal CSS applies styles to elements on a single web page.
  • It is useful when a webpage requires unique styling that is not shared with other pages.

What is Internal CSS in HTML?

Internal CSS is a way of applying CSS (Cascading Style Sheets) to an HTML document by writing CSS code inside the <style> element. The <style> element is placed within the <head> section of an HTML page.

CSS is used to control the appearance of HTML elements such as colors, fonts, spacing, borders, alignment, and layouts. Internal CSS allows developers to style a complete webpage without creating a separate CSS file.

This type of CSS is mainly used for small websites, single-page projects, demonstrations, and testing designs because the styles are limited to one HTML document.

Syntax of Internal CSS

Example 
<!DOCTYPE html>
<html>

<head>

<style>


h1 {
    color: blue;
}

p {
    font-size: 18px;
}


</style>

</head>

<body>

<h1>Welcome to CSS</h1>

<p>This paragraph uses Internal CSS.</p>

</body>

</html>
Result

Welcome to CSS

This paragraph uses Internal CSS.

Example Explained

<style>

The style tag contains CSS rules that define the design and appearance of HTML elements.

h1

The h1 selector targets all heading elements and applies the defined styles.

color

The color property changes the text color of an HTML element.

font-size

The font-size property controls the size of text displayed on the webpage.

Where is Internal CSS Written?

Internal CSS is always written inside the <head> section of an HTML document. The browser reads these styles before displaying the webpage and applies them to matching HTML elements.

💡 Note: Internal CSS only affects the HTML page where it is written. Other webpages cannot use the same styles unless the CSS code is copied again.

Advantages of Internal CSS

  • It is easy to write and understand for beginners.
  • No separate CSS file is required.
  • It is useful for single-page websites and small projects.
  • CSS and HTML remain together, making testing easier.
  • It loads quickly because no external stylesheet request is required.

Disadvantages of Internal CSS

  • It cannot be reused on multiple webpages.
  • Large HTML files become difficult to maintain.
  • Repeating CSS code increases the size of webpages.
  • External CSS is a better choice for large websites.

Internal CSS vs External CSS

Internal CSS is suitable for styling a single webpage, while External CSS is recommended for websites containing multiple pages. External CSS allows developers to create one stylesheet and apply the same design across many HTML documents.

🎨
Best Practice: Use Internal CSS when creating small projects, examples, or testing layouts. For professional websites and large applications, use External CSS for better organization and maintenance.

Conclusion

Internal CSS is an important method of adding styles directly inside an HTML document. It helps beginners understand how CSS works with HTML and allows quick customization of webpage designs. By using the <style> tag inside the head section, developers can easily control colors, fonts, spacing, and layouts. Although Internal CSS is useful for small projects, External CSS is preferred for large websites because it improves code organization and reusability.

← Previous Inline CSS Next → External CSS