Learn CSS Types: Inline, Internal, External + Advantages & Disadvantages

calender-iconPublished: 19 Jun 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
CSS
Table of Contents

INTRODUCTION

CSS can be embedded into HTML in three ways. Let us explore each of these types in detail.

  • INTERNAL CSS (also called Embedded stylesheet)
  • EXTERNAL CSS
  • INLINE CSS

INTERNAL CSS

Internal CSS is added directly in the HTML webpage. It is added in HTML <head> section using <style> tag. It is also called embedded stylesheet or document stylesheet.

Its scope is limited to single page in which it is included, hence has to be written in each HTML page. It is mostly used to style single webpage or small sites.

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>Document</title> 
  <style> 
   h1{ 
    color: green; 
    padding: 30px; 
    } 
   p{ 
    font-family: Lato; 
    font_size: 20px 
    margin:20px; 
    } 
  </style> 
</head> 
<body> 
 <h1> Introduction </h1> 
 <p> paragraph text </p> 
</body> 
</html>


Advantage of Internal CSS
  • Internal CSS is added directly in HTML code. So no need for seperate CSS files.
  • It is easier to do prototyping with it.
Disadvantage of Internal CSS
  • Only useful for small sites or single page
  • Need to be included in every page, which can be time consuming for large project.
  • Increase HTML page size and page load time.

EXTERNAL CSS

External CSS is not part of HTML Document and is a maintained as a seperate File. It is a .css extension file and can be saved either in project folder or anywhere on internet. This file is can be linked to HTML page using <link> or the @import at-rule. We will explore both the options.

1. Using <link> tag

External CSS file is linked to HTML page using <link> tag in <head> section. You need to specify the file path using href attribute. The file path can be absolute or relative.

Example: 

<link rel="stylesheet" href="">
2. Using @import

The @import rule is used to link external CSS sheet to webpage. It works similar to <link> tag. The difference is only in the placement of rule.

This rule can only be placed in the CSS file or in HTML webpage but only inside a <style> block and not directly in HTML.

Also in the CSS file it must be placed before any other rule (except @charset and @layer rules). If this rule is not placed at top position then it is ignored. The location of CSS file is declared using URL and the path can be absolute or relative.

Example: In HTML 

<head>
  <style>
    @import url("styles.css");
    body {
      background-color: lightgray;
    }
  </style>
</head>
Example: In CSS File 

@import url("reset.css");
@import url("theme.css");
Advantage of External CSS
  • Single External CSS file can be linked to multiple HTML pages
  • External CSS is more efficient method of writing CSS when your are creating large project. Because by editing one file you can change style of multiple pages.
  • It is cacheable or can be hosted on CDN.
Disadvantage of External CSS
  • Webpage is not loaded until External CSS is downloaded. It can slower down rendering if CSS file is large in size.

INLINE CSS

Inline CSS is added directly to the HTML element in webpage. To use Inline CSS add style attribute to element. They are mostly use to change properties of single element.

Inline CSS is not recommended for complex layouts. For example if there are 50 paragraphs in your website, if you intend to use Inline CSS then you have to write CSS for each of these paragraphs. Hence Inline CSS is not used for Big websites.

Example: 

 <h1 style="color:blue;" > Introduction </h1> 
 <p style="margin:10px;" > paragraph text </p>
Advantage of Inline CSS
  • It is a very easy and quick way to test new styling and preview the design.
  • No need to create seperate CSS file.
Disadvantage of Inline CSS
  • CSS rule need to be added to every element which is time consuming.
  • Can increase page size and page load time.

PRIORITY ORDER

Imagine writing Inline, Internal and External CSS for same element. HTML does not restricts you from writing more than one CSS for same element. In such case Inline CSS is applied First. Later Internal CSS and at last External CSS. In short the CSS nearest to HTML element is given preference.

Below is the order of Preference in decreasing order of priority.

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Frequently Asked Questions (FAQ)

What is the difference between internal, external, and inline CSS?
Type Location Scope Example Best For
Inline CSS Inside HTML tag using style attribute One element <h1 style="color:blue;">Text</h1> Quick fixes or testing styles
Internal CSS Inside <style> tag within <head> Single page <style>
h1 { color: green; }
</style> 		Styling one HTML file
External CSS Linked external .css file Multiple pages <link rel="stylesheet" href="style.css"> Large websites, reusable styles

Can you use inline and external CSS together?
Yes, you can use inline and external CSS together in the same HTML document. If both inline and external styles apply to the same element, the inline CSS will override external CSS (unless external CSS uses !important).

When should I use internal CSS instead of external CSS?
You should use internal CSS instead of external CSS in specific situations where external stylesheets may be unnecessary or less efficient. Here's when internal CSS is a better choice:
Use Internal CSS when:
  • Styling a single HTML page If your webpage is standalone and not part of a larger site. Example: A simple landing page, resume, or one-page portfolio.
  • Quick testing or prototyping Internal CSS is convenient for trying out styles without managing separate files.
  • No reuse of styles is needed If styles are only needed once and not shared across multiple pages.
  • Limited or no external file hosting In environments where linking to external files is not allowed or inconvenient (e.g., email templates, local HTML demos).
  • HTML emails Some email clients don't support external stylesheets, so internal styles are more reliable.

What is embedded CSS?
Embedded CSS, also known as internal CSS, refers to a method of adding CSS styles within the HTML file itself, inside a <style> tag located in the <head> section of the document.

Which CSS method provides better performance — internal or external?
The answer depends on the context, but generally:

Internal CSS may load faster on the first visit: It’s part of the HTML file, so the browser loads both HTML and CSS in one HTTP request. This can reduce loading time for small, single-page sites.

External CSS is faster and better for long-term performance: Although it adds one extra HTTP request, it can be cached by the browser. On repeat visits or multi-page sites, the browser doesn’t re-download the CSS file. It's more efficient for large websites with many pages.

Which tag is used for internal CSS?
The tag used for internal CSS is the <style> tag. The <style> tag is placed inside the <head> section of an HTML document. It contains CSS rules that apply to the elements within the same page.