Difference between Inline, Internal and External CSS

Last Updated : 23 Jul, 2025

CSS (Cascading Style Sheets) is essential for defining the presentation of web pages, including layout, colors, and fonts. There are three primary methods to apply CSS:

Inline CSS: Applied directly within an HTML element's style attribute, affecting only that specific element.
Internal CSS: Defined within a <style> tag in the <head> section of an HTML document, influencing the entire page.
External CSS: Contained in a separate .css file linked to the HTML document, allowing for consistent styling across multiple pages.

Here, we are going to discuss each of them in detail:

Inline CSS

Inline CSS is a way of defining the styling of an HTML element by adding CSS rules directly to the element's tag using the "style" attribute. It is used for quick and simple styling changes to specific elements, without creating a separate CSS file.

Syntax

<p style="css_styles">
 // Content
</p>

In this Example:

The style attribute is used directly within HTML tags (<h2> and <p>) to apply CSS properties like color and font-size to the elements.
The <h2> tag is styled with green text color and an 18px font size using inline CSS.
The <p> tag is styled with red text color and a 14px font size, also using inline CSS.

Internal CSS

Internal CSS, also known as embedded CSS, involves adding CSS rules directly within the <style> element in the <head> section of an HTML document. It allows styling specific to that document.

Syntax

<style>
 // CSS Properties
</style>

In this Example,

Internal CSS: The <style> tag within the <head> section defines CSS rules for the document.
Heading Styling: The <h1> element is styled with blue color, 24px font size, and bold weight.
Paragraph Styling: The <p> element is styled with green color and 16px font size.

External CSS

External CSS is used to place CSS code in a separate file and link to the HTML document. To use external CSS, create a separate file with the .css file extension that contains your CSS rules.

Keeps styles separate from HTML, improving code readability and maintainability.
Ideal for large projects to keep CSS centralized and reusable across multiple pages.
Allows consistent styling across the website by referencing a single CSS file.

Syntax

<head>
 <link rel="stylesheet" 
 type="text/css" href="style.css">
</head>

File Name: index.html

Create a CSS file named styles.css and write all the codes in that CSS file

File name: style.css

In this Example,

External CSS File: The style.css file contains CSS rules that style the <h1> and <p> elements.
HTML Linking: The <link> tag in the <head> section of index.html connects the external CSS file to the HTML document.
Element Styling: The <h1> element is styled with blue color, 24px font size, and bold font weight; the <p> element is styled with green color and 16px font size.

Differences between Inline, Internal, and External CSS

Feature	Inline CSS	Internal CSS	External CSS
Location	It is used within HTML tag using the style attribute.	It is used within <head> section of HTML document.	It is used in a separate .css file.
Selector Scope	Affects a single element or a group of elements.	Affects multiple elements within the same HTML element.	Affects multiple HTML documents or an entire website.
Reusability	Not reusable. Styles need to be repeated for each element.	Can be reused on multiple elements within the same HTML document.	Can be reused on multiple HTML documents or an entire website.
Priority	Highest priority. Overrides internal and external styles.	Medium priority. Overrides external styles but can be overridden by inline styles.	Lowest priority. Can be overridden by both inline and internal styles.
File Size	Inline styles increase the HTML file size, which can affect the page load time.	Internal styles are part of the HTML file, which increases the file size.	External styles are in a separate file, which reduces the HTML file size and can be cached for faster page loads.
Maintainability	Not easy to maintain. Changes need to be made manually to each element.	Relatively easy to maintain. Changes need to be made in one place in the <head> section.	Easiest to maintain. Changes need to be made in one place in the external .css file.

Best Practices for Using Inline, Internal, and External CSS

Inline CSS: Use sparingly for quick, specific style overrides; avoid for large projects due to maintenance challenges.
Internal CSS: Apply for single-page styling or when experimenting with styles; not ideal for multi-page sites.
External CSS: Preferred for large, multi-page websites to ensure consistency and ease of maintenance.

Comment

Article Tags: