Using Two CSS Files in the Same HTML File

Using two css files in the same html file

Yes this is possible, simply include two css files in the HEAD section of the document. Any styles set in the first will be overwritten in the second, so say you have this:

First file:

 #something{
  background-color: #F00;
  color: #FFF;
 }

And then in the second file:

 #something{
  background-color: #000;
 }

Then the background color for #something will be overwritten in the second file to black but the color will stay the same since the second file doesn't say anything about it.

Is is possible to embed 2 or more style sheets in one link tag?

No it's not possible to include multiple files in one <link> tag.

In your CSS-file, you can daisy-chain them into another file however using @import.

Lets say you have these files:

style.css
table.css
button.css

You can then in style.css do:

<!-- Including one css file into other -->
@import "table.css";
@import "button.css"; 

And in HTML import them all like this:

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

However you can use popular and powerful bundling tools such as Webpack that will bundle both your Javascript and CSS files.

Related Topics