How to automatically load a CSS file into HTML

Question

I have a basic index.html file in a folder, as well as many, many other files. I want them all to use the same CSS file, without having to manually add to every file. I was wondering if you renamed the file index.css or something like that it would automatically load into every HTML file in the folder? Out of curiosity, is there also a Javascript method for this too?

No, there's no magical file name that would include your CSS file in your HTML files. — j08691
– j08691, Commented May 8, 2017 at 16:14
is there also a Javascript method for this too - this would only replace your current problem with a new one: Adding javascript code to every single html file — Dirk Lachowski
– Dirk Lachowski, Commented May 8, 2017 at 16:15
Webpack's extract text plugin inserts a style tag into your index.html file as part of the bundling process. I have never used this with multiple html files as I mainly work with SAPS / components. Maybe look it up? probably overkill for what you are looking for though! — DeclanPossnett
– DeclanPossnett, Commented May 8, 2017 at 16:19
The best ways that are available would be using include or doing a bulk search and replace I guess. — Stickers
– Stickers, Commented May 8, 2017 at 16:50

MatejMecka · Accepted Answer · 2017-05-08 16:15:14Z

1

Bad news my friend No. There is no magical tool that will import the CSS into all of your files. You have to do it yourself. Also it's really easy

Get the CSS file
Import the CSS File

See it's that easy. Was it so hard to do it?

answered May 8, 2017 at 16:15

MatejMecka

1,4862 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The Whiz of Oz Over a year ago

Partials to the rescue ;)

Sabrina Jewson Over a year ago

I mostly wanted just to see if it is possible. I'm fine to copy paste, but it would be useful in some cases.

Quentame · Accepted Answer · 2017-05-08 16:23:27Z

1

You can't do that with simple HTML.

Do a PHP template instead, basically with:

head
header
nav menu
a content/container div/section
footer

Then, include your HTML/PHP page in your content.

For instance, use $_GET or $_POST to know which page to include.

answered May 8, 2017 at 16:23

Quentame

3551 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to automatically load a CSS file into HTML

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related