How to link multiple CSS style sheets in HTML?

To link multiple CSS Style Sheets in HTML, we have to use multiple HTML <LINK> tags.
Multiple <LINK> allow us to link as many CSS as you want.
For example i want to link 3 Style Sheets, for that i will use 3 <LINK> tags and provide the location of my 3 Style Sheets inside LINK> Tag's href attribute <LINK href="">.

index.html

<html>
<head>
    <title>Multiple CSS</title>
    <!-- Multiple CSS Here -->
    <link href="style1.css"/>
    <link href="style2.css"/>
    <link href="style3.css"/>
</head>
<body>
    ...
</body>
</html>

Related Topics: How to link multiple css style sheets in HTML [With Code]

Click on Titles below to reveal the Data

how are multiple style sheets applied to an html document?

In HTML, all the CSS are applied in top to down order.
Where the botton CSS might overwrite the previous CSS Properties. So it's important to put them in order.

red.css

h1{
    color: red;
}

yellow.css

h1{
    color: yellow;
}

index.html

<html>
<head>
    <title>Multiple CSS</title>
    <!-- Multiple CSS Here -->
    <link href="red.css"/>
    <link href="yellow.css"/>
</head>
<body>
    <h1>Color is RED or Yellow?</h1>
</body>
</html>

Results

Color is RED or Yellow?

Here yellow.css will overwrite the red color from red.css css file.

combine html css javascript single file

To combine everthing HTML, CSS and JavaScript in a single file you can LINK external CSS and JS files inside HTML or you can define CSS and JS inside HTML.

index.html [Linking External CSS and JS in HTML]

<html>
<head>
    <title>Linking CSS and JS in HTML</title>
    <!-- Linking External CSS -->
    <link href="external.css"/>
</head>
<body>
    <h1>Linking CSS and JS in HTML</h1>
    <!--Linking External JavaScript-->
    <script src="external.js"></script>
</body>
</html>

index.html [Internal CSS and JS in HTML]

<html>
<head>
    <title>Linking CSS and JS in HTML</title>
    <!-- Internal CSS -->
    <style>
        h1{
            color: pink;
        }
    </style>
</head>
<body>
    <h1>Linking CSS and JS in HTML</h1>
    <!--Internal JavaScript-->
    <script>
        alert("Got this from JS")
    </script>
</body>
</html>

in what instance do you have multiple css files for a website

You can use multiple CSS files for a single website, if you are managing Styles for Header, footer, main and other elements of the website separately.
In that case using different CSS file can make your work very easy.
Because in big website with too many files, its hard to find the HTML Element and CSS property easily.
But if you style different part of the website in different files, then its very easy to find what you are looking for.
In another scenariok, If you have some pages like 404 page and Home Page where we don't load the main content then then your browser don't have to load every CSS that we are not even going to use on that page. You can skip it and load only the content you need and this will make your website load quaikly.

how index.html and style.css files can be connected?

To connect index.html file with style.css, then you have to use <LINK> tags inside index.html.
HTML <LINK> tag let's to link external CSS files like style.css in HTML Documents.
Where inside the <LINK> tag's href attribute, you have to put your external CSS file's location [<link href="style.css"/>].

index.html

<html>
<head>
    <title>Linking CSS and JS in HTML</title>
    <!-- Linking External CSS -->
    <link href="style.css"/>
</head>
<body>
    <h1>HTML index.html with CSS style.css</h1>
</body>
</html>