Introduction
Placing CSS in an HTML file is as important as using it. CSS can be added to the HTML file in three different ways. Inline, Internal, and External. While the page loads, adding CSS to the HTML file affects the styles and animations that are loaded.
Ways To Add CSS In HTML
Basically, we have three ways to add CSS to an HTML file.
![Ways of adding CSS image]()
Let's explore them one by one
Inline CSS
As the name depicts itself i.e. in a line. Inline CSS is used within the tag to which we want to apply. Inline CSS is used when we have to apply a specific style to any tag. Inline CSS has the highest priority. Inline CSS is considered a bad practice to use CSS in any HTML file because it makes the code very large and difficult to understand and also increases page loading time.
<!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>
</head>
<body>
<div class="section">
<h1 style="color: blue;">This is the largest heading.</h1> <!-- inline css -->
</div>
</body>
</html>
In the above code, we have used color property inside the style attribute in the h1 tag itself.
Output
![Inline CSS output image]()
We can add more style properties separated by the semicolon.
<h1 style="color: blue; background-color: aqua;">This is the largest heading.</h1>
Output
![Inline CSS output image]()
Internal CSS
Internal CSS is used in the same HTML file but inside the style tag in the head section. Internal CSS has less priority than Inline CSS but is higher than external CSS. In Internal CSS we have to use the selector to refer to the HTML element. Selectors are used for tagging or identifying the elements in the CSS file. To know more about selectors please refer to the article Selectors In CSS.
<!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>
.section
{
color:black;
background-color: red;
}
</style>
</head>
<body>
<div class="section">
<h1>This is an example of internal CSS.</h1>
</div>
</body>
</html>
In the above code, in the head section inside the style tag, we have applied internal CSS. We have used class selector.
Output
![internal CSS output image]()
External CSS
When we write CSS in the external file and add the link of that file to the HTML file that is known as External CSS. External CSS is the most preferred way to use CSS in HTML. Using external CSS makes the file loading faster and CSS gets loaded first and then the HTML content gets loaded. Selectors are also used in external CSS to refer to the HTML elements. We provide the reference of the CSS file in the HTML file in the head section within the link tag.
Steps to add External CSS
1. Create a CSS file with .css extension and add all the CSS in this file.
.section
{
color:green;
}
2. Add the reference of this file in the HTML file within the link tag.
<!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>
<link rel="stylesheet" href="style.css"> <!-- This is the link of external CSS file-->
</head>
<body>
<div class="section">
<h1>This is an example of external CSS.</h1>
</div>
</body>
</html>
Output
![External CSS output image]()
Priority Order
We have seen that we can apply CSS in three ways but what if we have applied the same style property in different ways then which style gets applied? This problem is solved by priority order. Inline CSS has the highest priority. External CSS has the lowest priority. Internal CSS comes between Inline and External.
![Order of CSS Image]()
Let's understand this by an 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>
<link rel="stylesheet" href="style.css">
<style>
.section{
color: yellowgreen;
}
</style>
</head>
<body>
<div class="section">
<h1 style="color: red;">This is a demo file.</h1>
</div>
</body>
</html>
In the above code, we have applied color property by both inline and internal CSS.
.section
{
color:green;
}
In the above code, we applied external CSS and provided the link to the HTML file.
Output
![Order of CSS Output Image]()
After applying the same color property in all three ways. We can see in the above image that the color is red which was applied in inline CSS.
Now we are removing the inline CSS.
<!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>
<link rel="stylesheet" href="style.css">
<style>
.section{
color: yellowgreen;
}
</style>
</head>
<body>
<div class="section">
<h1>This is a demo file.</h1>
</div>
</body>
</html>
In the above code, we have applied internal CSS.
.section
{
color:green;
}
In the above code, we have applied external CSS.
Output
![Order of CSS Output Image]()
After applying the same color property by internal and external CSS, we can see in the above image that the internal CSS property gets applied.
Conclusion
We have three different ways to apply CSS in any HTML file, Inline, Internal and External. Inline CSS is applied within the tag itself inside the style attribute. Internal CSS is used in the head section inside the style tag. External CSS is applied by adding the link of the external CSS file in the HTML file. To apply external CSS is the best practice and increases the performance of our website but has less priority than the internal and inline CSS. Inline CSS is used mostly to give some specific style property to any HTML tag.
Thanks for reading this article. Do follow to get updates about upcoming articles.
More articles about using CSS