Understanding Inline, Internal, and External CSS and Their Priority Order
Nitish Kumar Singh
Dec 8, 2023Hello developers! In this blog post, we will explore Inline, Internal, and External CSS in web development and understand their priority order. For example, if all three types of CSS are applied to an element, then which CSS is effective.
What is CSS?
CSS, or Cascading Style Sheets, is a fundamental language used to style web pages in web development. We use CSS to style web pages, making them visually appealing, controlling their appearance, laying out web pages, and adding animations and transitions. Key components of CSS include CSS selectors (like classes, tags, ids, etc.) used to select or target HTML elements and CSS properties (like color, border, display, etc.) used to apply a specific style to elements using CSS values. The image below shows how YouTube looks with or without CSS.
Inline CSS
The CSS used in the style attribute of an HTML element is known as Inline CSS. We use inline CSS to quickly style elements. This is easy to apply in HTML files and by using JavaScript. The priority level of inline CSS is above all CSS types. However, the reusability of inline CSS is zero because it is written specifically for one element. Using inline CSS is not a good practice in large projects. The following examples show how inline CSS is applied to an element.
<!-- In HTML file -->
<p style="color: red;font-weight: bold;text-align: justify;font-size: 25px;">
Hello, I'm a red bold text with justified alignment and a font size of 25px.
</p>
// In JavaScript
const element = document.getElementById("an-element");
// Apply a new set of inline CSS, replacing all applied CSS
element.style = 'color: red;font-weight: bold;text-align: justify;font-size: 25px;';
// Apply a specific style while preserving all other applied CSS
element.style.color = "red";
element.style.textAlign = "justify";
Internal CSS
The CSS used in the style tag under the head of an HTML document is known as Internal CSS. We use internal CSS to easily style elements of an HTML document. This is internal to a single HTML file, so it can be reused on multiple elements. The priority level of Internal CSS is between inline and external CSS. The following example shows how Internal CSS is applied to an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.para{
color: red;
font-weight: bold;
text-align: justify;
font-size: 25px;
}
</style>
</head>
<body>
<p class="para">Hello, I'm a red bold text with justified alignment and a font size of 25px.</p>
</body>
</html>
External CSS
The CSS written in another CSS file and linked through a link of rel: stylesheet in the head of an HTML file is known as External CSS. We use external CSS when we want to use the same CSS in multiple HTML files and/or keep it organized in a separate file for better readability and maintainability. The priority level of external CSS is the lowest of all types of CSS. The following codes are example of external CSS.
/* In a file named style.css */
.para {
color: red;
font-weight: bold;
text-align: justify;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Link External CSS of the style.css file like below -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="para">
Hello, I'm a red bold text with justified alignment and a font size of 25px.
</p>
</body>
</html>
CSS Priority Order
The CSS priority order of all CSS types is: Inline CSS > Internal CSS > External CSS. The below image show example of the priority order effect of CSS-Types.
The priority order of CSS within a CSS type is: earlier written CSS has a less priority level than later. The priority order of CSS based on the selector is: #id > .class > tag. The below image show example of the priority order effect of CSS-Selector.
