Different ways to include CSS and JS code in your HTML

We will be exploring ways to include CSS/JS in your HTML and will also discuss recommended approach.

Below i have mentioned 3 ways that how you can include the CSS/JS code into your HTML page. All these approach have pros and cons of each approach. And we will also recommended the approach for you.

1. Inline code

In this approach, we add css styling on individual tags and it can’t be reused even on same page.

CSS

<p style="color: green; font-size: 14px;">Paragraph inline css</p>

2. Document code

In this approach, we will show how you can add css/js code on document level and that can be reused throughout the page. But it can’t be used on other pages, you will have to write a lot of duplicate code in case you want to use same on different pages.

CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React Redux App</title>
    <style>
      .paragraph {
        color: green;
      }
    </style>
  </head>
  <body>
    <p class="paragraph">Paragraph inline css</p>
  </body>
</html>

JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React Redux App</title>
    <script>
      function handleClick() {
        console.log('Document level JS');
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="handleClick()">Button</p>
  </body>
</html>

3. External Code

In this approach, We will be managing CSS and JS code into external files and in structured way. This is recommended approach for reusability of your code and help us maintain structured code. This also help multiple developer working on different part of code in same app.

root/index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <p class="paragraph">Paragraph external styling applied...</p>
    <button type="button" onclick="handleClick()">Click to call JS function</button>
    <!-- Javsacript code will go here at the end of body -->
    <script src="./script.js"></script>
</body>

</html>

root/style.css

.paragraph {
    color: green;
}

root/script.js

(()=>{
    function handleClick() {
        console.log('Document level JS');
    }
})(); // Immediate invoking function expression

External JavaScript Advantages

Placing scripts in external files has some advantages:

It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads

Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Conclusion

We have seen multiple ways of how you can include CSS/JS into your HTML page. We recommend you to use external way of including CSS/JSS, that will help you maintain structured code with high reusability.

Thanks 🙂