How to link multiple CSS style sheets in HTML [Updated]

In one HTML Document, we can link multiple Internal and External Stylesheets.
So if you want to know, How to link multiple CSS stylesheets in HTML then this tutorial is for you. Because in this tutorial we will include and link multiple CSS Stylesheets in one HTML File.

style1.css

h1{
    color: gray;
}

style2.css

h2{
    color: green;
}

style3.css

h3{
    color: cyan;
}

index.html

<html>
<head>
	<title>Link Multiple CSS Files</title>
	<link rel="stylesheet" href="style1.css"/>
	<link rel="stylesheet" href="style2.css"/>
	<link rel="stylesheet" href="style3.css"/>
</head>
<body>
	<h1>My H1 Text</h1>
	<h2>My H2 Text</h2>
	<h3>My H3 Text</h3>
</body>
</html>

Results

My H1 Text
My H2 Text
My H3 Text

Here as you can see we have used 3 Different CSS Style Sheets (style1.css, style2.css, and style3.css) and we have linked them in our index.html file by using HTML <Link> tags.
Where using <Links>; tag's rel attribute, we have provided the relation and by using the href attribute, we have provided the source of our CSS Stylesheets that we want to link.

Why do we link CSS Files inside HTML Head tag?

When browser renders our HTML page, it will load the Head data before loading HTML elements from body tag.
So External files like CSS needs to be loaded before the Elements, so Brower can Easly style them accordingly.
Otherwise, browser will render the HTML Elements and the after loading the CSS file browser need to style them which can create some layout shifts while loading web pages.

How to link multiple CSS style sheets in HTML [Updated]

How to link two CSS files in one HTML

If you want to link two CSS files in one HTML file or 200 CSS files in one HTML file, the process remains the SAME. By using HTML <link> tags we can link one and multiple CSS files in one HTML File.

style1.css


h1{
    color: gray;
}

style2.css\

h2{
    color: green;
}

index.html

<html>
<head>
	<title>Link Two CSS Files</title>
	<link rel="stylesheet" href="style1.css"/>
	<link rel="stylesheet" href="style2.css"/>
</head>
<body>
	<h1>My H1 Text</h1>
	<h2>My H2 Text</h2>
</body>
</html>

In this example, we are using 2 CSS files (style1.css and style2.css). Where the style1.css file will style the first Heading and style.css will style the Second heading.

Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

How to link multiple js files in HTML

The process of linking one and more then one / Multiple JS Files in HTML is very similar.
If you want to link one JS file the use one Script tag and if you want to link multiple JS Files you need to use multiple Script tags.
So you just have to use multiple Script tags for linking multiple JS Files in HTML.

index.html

<html>
<head>
	<title>Link Multiple CSS Files</title>
	<!-- loading Scirpts at the Begining -->
	<script src="script1.js"></script>
	<script src="script2.js"></script>
</head>
<body>
	<h1>Linking Multiple JS Scripts</h1>
</body>
</html>

Here as you can see that we are loading our Scripts inside the HEAD tags, se browser will load these JS Script before loading HTML Elements.
So if you want to load a Script first before HTML Elements, then you need to link them inside HTML HEAD tags.
But if your script needs HTML elements in order to work / Script depends upon HTML elements then you need to load them after HTML Elements like:

index.html

<html>
<head>
	<title>Link Multiple JS Files</title>
</head>
<body>
	<h1>Loading Multuple JS Script Files</h1>
	<!-- loading Scirpts after HTML Elements -->
	<script src="script1.js"></script>
	<script src="script2.js"></script>
</body>
</html>

script1.js

alert("from Script 1");

script2.js

alert("from Script 2");

How to use one CSS file for multiple pages

If you want to use One CSS file for multiple pages, then you need to create one External CSS file (external.css) and by using HTML Link tags you will be able to use/Link that One External CSS file with multiple HTML Pages (page1.html, page1.html and so on...).

external.css

h1{
    color: cyan;
}

index.html

<html>
<head>
	<title>Link Multiple CSS Files</title>
	<link rel="stylesheet" href="external.css"/>
</head>
<body>
	<h1>Page1</h1>
</body>
</html>

<html>
<head>
	<title>Link Multiple CSS Files</title>
	<link rel="stylesheet" href="external.css"/>
</head>
<body>
	<h1>Page2</h1>
</body>
</html>

CSS demo one HTML page with multiple styles

In this Demo Example we will use multiple Stylesheets inside One HTML Page.
Where style1.css will change the color, style2.css will change the background-color, style3.css will change the Font Style, and style.css will change the Size of our Heading.

style1.css

h1{
    color: gray;
}

style2.css

h1{
  background-color: pink;
}

style3.css

h1{
    font-weight: bolder;
}

style4.css

h1{
    font-size: 34px;
}

index.html

<html>
<head>
	<title>Link Multiple CSS Files</title>
	<link rel="stylesheet" href="style1.css"/>
	<link rel="stylesheet" href="style2.css"/>
	<link rel="stylesheet" href="style3.css"/>
	<link rel="stylesheet" href="style4.css"/>
</head>
<body>
	<h1>My Text</h1>
</body>
</html>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Just 10$/hSee Plans100% Free Trial + Money Back Guaranty
Logo