Include CSS & JavaScript into HTML

This section will cover how to add or include CSS & JavaScript codes into an HTML page.

CSS & JS Example


How to include or add CSS into HTML

We can add or include CSS into HTML documents in 3 ways:

  • Inline : Using the style attribute inside HTML elements or tag.

  • Internal : Using a <style> element or tag in the <head> section, or we may use it anywhere in HTML

  • External : Using a <link> element or tag to link to an external CSS file.

Example code for Inline CSS

<h1 style="color:red;">I am red</h1>

Example code for Internal CSS

<style>
    body {
        background-color: powderblue;
    }

    h1 {
        color: blue;
    }

    p {
        color: red;
    }
</style>

Example code for External CSS

<link rel="stylesheet" type="text/css" href="https://hmtmcse.com/asset/css/bootstrap.min.css">


How to include or add JS into HTML

We can add or include JS into HTML documents in 3 ways as well:

  • Inline : Using various event (onclick, onblur, onchange etc.) attribute inside HTML elements or tag.

  • Internal : Using a <script> element or tag in the <head> section, or we may use it anywhere in HTML

  • External : Using a <script> element or tag to link to an external js file as well.

Example code for Inline JS

<input type="button" onclick="alert('clicked')" value="Click Me to show alert">

Example code for Internal JS

<script>
    jQuery(document).ready(function () {
        console.log("Yes document is ready.")
    })
</script>

Example code for External JS

<script src="https://hmtmcse.com/asset/js/jquery-3.2.1.min.js"></script>
Share