I have an HTML file with an external CSS file and I would like to inline the styles from the external style sheet into one inline <style> tag at the top of the head. Any assistance would be greatly appreciated.
Note: I do not want to use the style attribute applied to each element, I want to have one style tag at the top.
Original Code
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>