Skip to content

How to link JavaScript to HTML and CSS

  • by

Learn how to link JavaScript to HTML and CSS files to enhance your web pages with interactivity and dynamic behavior. Follow these step-by-step instructions to create a separate JavaScript file, write your code, and link it to your HTML file using the <script> tag. Additionally, you can link a CSS file using the <link> tag to style your web page.

To link JavaScript to HTML and CSS, you need to follow these steps:

  1. Create a JavaScript file with a .js extension.
  2. Write your JavaScript code within this file.
  3. In your HTML file, include a reference to the JavaScript file using the <script> tag within the <head> or <body> section.
  4. If you have a separate CSS file, include a reference to it in your HTML file using the <link> tag within the <head> section.

In your HTML file, you need to include a reference to the JavaScript file. Add the following code inside the <head> section of your HTML file:

<script src="path/to/your/script.js"></script>

Replace “path/to/your/script.js” with the actual path to your JavaScript file. If the JavaScript file is in the same directory as your HTML file, you can simply specify the file name, e.g., <script src="script.js"></script>.

If you have a separate CSS file, you can link it to your HTML file as well. Add the following code inside the <head> section of your HTML file:

<link rel="stylesheet" type="text/css" href="path/to/your/styles.css">

Replace “path/to/your/styles.css” with the actual path to your CSS file. If the CSS file is in the same directory as your HTML file, you can simply specify the file name, e.g., <link rel="stylesheet" type="text/css" href="styles.css">.

Link JavaScript to HTML and CSS example

Simple example code.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Linking Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <h1>JavaScript Linking Example</h1>

  <button onclick="myFunction()">Click me</button>

  <script>
    function myFunction() {
      alert("Hello, World!");
    }
  </script>
</body>
</html>

In the example above, the CSS file is linked using the <link> tag, and the JavaScript file is linked using the <script> tag. The myFunction() function is defined inline using <script> tags as well.

Here’s another example of how to link JavaScript to HTML and CSS:

Let’s say you have the following files in the same directory:

  • index.html (HTML file)
  • styles.css (CSS file)
  • script.js (JavaScript file)

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Linking Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <h1>JavaScript Linking Example</h1>

  <button onclick="myFunction()">Click me</button>

  <script>
    function myFunction() {
      alert("Hello, World!");
    }
  </script>
</body>
</html>

styles.css:

h1 {
  color: blue;
}

script.js:

function myFunction() {
  alert("Button clicked!");
}

Output:

How to link JavaScript to HTML and CSS

In this example, we have an HTML file (index.html) that includes a reference to the CSS file (styles.css) using the <link> tag in the <head> section. Additionally, it includes a reference to the JavaScript file (script.js) using the <script> tag in the <head> section.

Comment if you have any doubts or suggestions on this JS HTML code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading