Apply Now Apply Now Apply Now
header_logo
Post thumbnail
FULL STACK DEVELOPMENT

Types of CSS: A Complete Guide to All 3 Types with Examples

By Jebasta

Jun 10, 2026 5 Min Read 11732 Views

(Last Updated)

Every website you visit has CSS working behind the scenes to control colours, fonts, spacing, and layout. But not all CSS is written the same way. Understanding the types of CSS is one of the first things you learn on any frontend development path. The three types of CSS — inline, internal, and external — each have different use cases, advantages, and trade-offs. Knowing which type of CSS to use and when is a fundamental skill for any frontend developer. This guide explains all three types of CSS with clear examples, a side-by-side comparison, and practical guidance for 2026.

Table of contents

  1. TL;DR Summary
  2. What is CSS ?
  3. Types of CSS at a Glance
  4. The 3 Main Types of CSS
    • Inline CSS
    • What Is Inline CSS?
    • Inline CSS Example
    • Pros and Cons of Inline CSS
    • Internal or Embedded CSS
    • What Is Internal CSS?
    • Internal CSS Example
    • Pros and Cons of Internal CSS
    • External CSS
    • What Is External CSS?
    • External CSS Example
    • Pros and Cons of External CSS
  5. Inline vs Internal vs External: Comparison Table
  6. When to Use Which Type of CSS
  7. Real-World Use Cases
  8. Common Mistakes to Avoid
    • 💡 Did You Know?
  9. Concluding Thoughts...
  10. FAQs
    • What are the 3 types of CSS?
    • What is the difference between inline and external CSS?
    • Which type of CSS is best for a real website?
    • Why does inline CSS override internal and external CSS?

TL;DR Summary

  • There are 3 main types of CSS: Inline, Internal (Embedded), and External.
  • Inline CSS is written directly inside an HTML tag using the style attribute. Best for quick, one-off changes.
  • Internal CSS is written inside a <style> tag in the <head> section. Best for single-page styling.
  • External CSS is written in a separate .css file and linked to HTML. Best for multi-page websites and production code.
  • External CSS is the industry standard. Use inline only as a last resort.

What is CSS ?

CSS stands for Cascading Style Sheets. It is a stylesheet language that controls how HTML elements are displayed on screen. Without CSS, every webpage would look like a plain wall of text.

CSS works by selecting HTML elements and applying style rules to them. A basic CSS rule looks like this:

p {
  color: blue;
  font-size: 16px;
}

The selector (p) targets all paragraph elements. The declarations (color: blue and font-size: 16px) tell the browser how to style them. The three types of CSS differ in where these rules are written and how they are applied to the page. Before we go deeper into each type of CSS, here is a quick overview.

Types of CSS at a Glance

TypeWhere It Is WrittenScopeBest Used For
Inline CSSInside the HTML tag’s style attributeSingle elementQuick fixes, email templates
Internal CSSInside <style> tag in <head>Single pageSingle-page projects, demos
External CSSIn a separate .css fileEntire websiteAll production websites

The 3 Main Types of CSS

Now let us discuss the types of CSS, their benefits, drawbacks, and examples in detail:

1. Inline CSS

What Is Inline CSS?

Inline CSS is the first and most direct of the three types of CSS. It applies styles directly to a single HTML element using the style attribute inside the opening tag. It only affects that one element and nothing else on the page.

Inline CSS Example

<p style="color: blue; font-size: 16px;">
  This paragraph has inline CSS applied.
</p>

The color and font-size rules apply only to this specific <p> tag.

Pros and Cons of Inline CSS

  • Pros: No separate file needed. Highest specificity — overrides both internal and external types of CSS. Useful for HTML email templates where external stylesheets are not supported.
  • Cons: Mixes content and design, which makes code harder to read and maintain. Cannot be reused across elements. Impossible to manage at scale on a real website.

2. Internal or Embedded CSS

What Is Internal CSS?

Internal CSS — also called embedded CSS — is the second of the three types of CSS. It is written inside a <style> tag placed in the <head> section of an HTML document. The styles apply to all matching elements on that single page.

MDN

Internal CSS Example

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-family: Arial, sans-serif;
      color: #333333;
    }
    h1 {
      color: #0066cc;
    }
  </style>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
</body>
</html>

Both <p> tags get the same font and colour from one rule — no need to repeat the style on each element.

Pros and Cons of Internal CSS

  • Pros: Cleaner than inline CSS. Styles are centralised for one page. Useful for quick demos, landing pages, and single-page projects. No extra HTTP request needed. A good stepping stone between inline and external types of CSS.
  • Cons: Styles cannot be reused across multiple pages. As the page grows, the <head> section gets cluttered. Each page that needs the same styles must repeat them.

Also Read: A Complete Guide to HTML and CSS for Beginners

3. External CSS

What Is External CSS?

External CSS is the third and most important of the three types of CSS. It is written in a completely separate .css file and linked to HTML documents using a <link> tag in the <head>. This is the standard approach for all real-world websites and the type of CSS every professional developer uses daily.

External CSS Example

HTML file (index.html):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This paragraph is styled from an external CSS file.</p>
</body>
</html>

CSS file (styles.css):

h1 {
  color: #0066cc;
  font-size: 32px;
}

p {
  font-family: Arial, sans-serif;
  color: #333333;
  line-height: 1.6;
}

The styles in styles.css apply to every HTML page that links to it. Change the file once and every linked page updates automatically. This is the core advantage of the external type of CSS over the other two.

Pros and Cons of External CSS

  • Pros: Complete separation of content and design. One CSS file styles an entire website. The browser caches the file after the first load, making every subsequent page load faster. Easiest to maintain and scale. This is the most recommended of all types of CSS for production use.
  • Cons: Requires an additional HTTP request on the first page load. A broken <link> tag means the entire page loses its styling.

Inline vs Internal vs External: Comparison Table

FeatureInline CSSInternal CSSExternal CSS
LocationInside HTML tag<style> in <head>Separate .css file
ScopeOne elementOne pageEntire website
ReusabilityNoneSingle page onlyFull reuse across pages
MaintainabilityVery lowMediumHigh
PerformanceNo extra requestNo extra requestOne HTTP request (cached after first load)
SpecificityHighestMediumLowest
Best forEmail templates, quick fixesDemos, single pagesAll production websites

When to Use Which Type of CSS

Now that you understand all three types of CSS, use this guide to decide which type of CSS fits your situation:

  • Use inline CSS when you are building HTML email templates (email clients often block external stylesheets), making a one-time override that cannot be handled any other way, or doing rapid browser debugging.
  • Use internal CSS when you are building a single standalone HTML page, creating a quick proof-of-concept or demo, or working on a small project that will never grow beyond one file.
  • Use external CSS when you are building any real website with more than one page, working in a team where designers and developers work on different files, or building a project you plan to maintain over time.

In professional web development, external CSS is almost always the right choice. Inline CSS in production code is generally considered a code smell.

Real-World Use Cases

Zomato and Swiggy use large external CSS files — often compiled from preprocessors like SASS — to style their entire platform consistently. A single change to a button style in one CSS file updates every button across thousands of pages instantly. This is only possible with the external type of CSS.

Marketing email templates from companies like Amazon, Flipkart, and Nykaa almost always use the inline type of CSS because most email clients (Gmail, Outlook) block or ignore external stylesheets. The only reliable way to guarantee styling in HTML emails is inline CSS.

Common Mistakes to Avoid

  • Using inline CSS everywhere in a real project. Beginners often reach for this type of CSS because it gives instant results, but it creates unmaintainable code fast. If you find yourself writing style="..." on more than two elements, move those styles into an external file immediately.
  • Forgetting to link the external CSS file correctly. A missing or wrong href path on the <link> tag means your external type of CSS never loads and the entire page loses its styling. Always check the file path relative to your HTML file and test in the browser after linking.
  • Mixing all three types of CSS on the same page without understanding specificity. When inline, internal, and external CSS rules all target the same element, the styles conflict. Inline wins, then internal, then external. Developers who do not understand this spend hours debugging styles that appear to do nothing.

If you want to learn more about programming with HTML, and CSS as well as web development and make a successful career out of it, then you must sign up for the Certified Full Stack Development Course, offered by HCL GUVI, which gives you in-depth knowledge of the practical implementation of all frontend as well as backend development through various real-life FSD projects.

💡 Did You Know?

  • CSS was first proposed by Håkon Wium Lie on October 10, 1994, while working at CERN. It was officially released as CSS Level 1 in December 1996, making it nearly 30 years old in 2026 and still the primary styling language for the entire web.
  • According to W3Techs (2026), CSS is used by over 96% of all websites on the internet, making knowledge of the types of CSS one of the most universally valuable skills in all of web development.
  • The most commonly used type of CSS in professional web development is External CSS, used in combination with CSS preprocessors like SASS and LESS and CSS frameworks like Tailwind CSS and Bootstrap.
  • CSS-in-JS libraries like Styled Components and Emotion, which are popular in React projects, are essentially a modern variation of Inline CSS where styles are written in JavaScript and scoped to individual components.

Concluding Thoughts…

The three types of CSS — inline, internal, and external — each serve a different purpose. Understanding the types of CSS and when to use each one is a foundational skill every developer needs. Inline CSS is powerful but hard to maintain. Internal CSS is useful for single-page work. External CSS is the standard for every real website and the type of CSS you should default to in all professional projects. Mastering when and why to use each type of CSS is one of the first steps on the path to becoming a confident frontend developer.

Must Read | Complete CSS Tutorial: Essential Guide to Understand CSS

FAQs

1. What are the 3 types of CSS?

The three types of CSS are Inline CSS (written inside an HTML tag’s style attribute), Internal CSS (written inside a <style> tag in the <head> section), and External CSS (written in a separate .css file linked to HTML). Each of these types of CSS has a specific purpose. External CSS is the industry standard for all production websites.

2. What is the difference between inline and external CSS?

These are two very different types of CSS. Inline CSS applies styles to a single HTML element and has the highest specificity. External CSS applies styles to entire pages and websites through a linked .css file. Of all the types of CSS, external is the most reusable, maintainable, and cacheable by the browser.

3. Which type of CSS is best for a real website?

External CSS is the best type of CSS for any real, multi-page website. It separates content from design, allows one file to style an entire site, and is cached by the browser for faster load times. Internal CSS is acceptable for single-page demos. Inline CSS should be used only for HTML emails or isolated overrides.

MDN

4. Why does inline CSS override internal and external CSS?

Because of CSS specificity rules. Among all types of CSS, inline has the highest specificity value (1000 points), internal and external styles have lower values. When the same property is set by multiple types of CSS on the same element, the highest specificity value wins. This is the “cascading” part of Cascading Style Sheets.

Success Stories

Did you enjoy this article?

Schedule 1:1 free counselling

Similar Articles

Get in Touch
Chat on Whatsapp
Request Callback
Share logo Copy link
Table of contents Table of contents
Table of contents Articles
Close button
  1. TL;DR Summary
  2. What is CSS ?
  3. Types of CSS at a Glance
  4. The 3 Main Types of CSS
    • Inline CSS
    • What Is Inline CSS?
    • Inline CSS Example
    • Pros and Cons of Inline CSS
    • Internal or Embedded CSS
    • What Is Internal CSS?
    • Internal CSS Example
    • Pros and Cons of Internal CSS
    • External CSS
    • What Is External CSS?
    • External CSS Example
    • Pros and Cons of External CSS
  5. Inline vs Internal vs External: Comparison Table
  6. When to Use Which Type of CSS
  7. Real-World Use Cases
  8. Common Mistakes to Avoid
    • 💡 Did You Know?
  9. Concluding Thoughts...
  10. FAQs
    • What are the 3 types of CSS?
    • What is the difference between inline and external CSS?
    • Which type of CSS is best for a real website?
    • Why does inline CSS override internal and external CSS?