convert css file into inline styles in HTML using npm package

Question

I have HTML file with external css file, like to inline the styles in external style sheet into one inline <style> tag at the top of the head . Thanks in advance for any help

Note: Do not want to use style attribute applied to each element, want to have one style tag at the top

Before Converting

p {
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML Template</title>
  <link rel="stylesheet" type="text/css" href="css/mystyle.css">
  <script type="text/javascript" src="js/myscript.js"></script>
</head>

<body>
  <p>Welcome to Template!!</p>
</body>

</html>

After Converting

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML Template</title>
  <!-- START: Replaced inline tag from external css file mystyle.css as above-->
  <style>
    .p {
      color: red
    }
  </style>
  <!-- END: Replaced inline tag from external css file mystyle.css as above-->
  <script type="text/javascript" src="js/myscript.js"></script>
</head>

<body>
  <p>Welcome to Template!!</p>
</body>

</html>

Saiqul Haq · Accepted Answer · 2018-03-10 08:42:58Z

1

You can start by make your html file accessible from web browser if you use php, you can make it accessible by run following command php -S 127.0.0.1:4000 , make sure you can access it by open localhost:4000 on your web browser, there are another way how to accessible from another languages, but it's out of the scope of this question

the second step is install inliner npm package npm install -g inliner

and execute inliner http://localhost:4000 > output.html

open output.html to see the result

execute inliner -i http://localhost:4000 > output.html if you don't want to convert the image to be base64 encoded

answered Mar 10, 2018 at 8:42

Saiqul Haq

2,42719 silver badges18 bronze badges

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

1 Comment

Alex Jones Over a year ago

inliner is deprecated, so not recommeded

Collectives™ on Stack Overflow

convert css file into inline styles in HTML using npm package

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related