How To Inject CSS Code Into an HTML Page?

A step-by-step guide to solving a problem

Image from Unsplash

Introduction

I originally came across this StackOverflow question and it got me thinking — how would I automatically inject the CSS contents of a CSS file into an HTML page? After some research, I found a solution and this article aims at walking you through it.

Problem

Let’s revisit the problem before we dive into the solution. We want to replace the link tag in the HTML file with the CSS contents of the file that the link tag refers to. So, for instance, if the HTML contained the following line of code:

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

It should be replaced with this:

<style>
  <!-- minified contents of the style.css file here -->
</style>

When is this helpful?

You might ask, “What’s the point of this?”

Good question! This is useful if you have a single web page that needs to load real quick. Because the web page is not requesting any additional files, it’s able to render the page faster. I’ve personally seen a single web page being used as an offline/maintenance page or as a stand-in page (e.g. Azure Application Gateway/AWS CloudFront) when…