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:
- Create a JavaScript file with a .js extension.
- Write your JavaScript code within this file.
- In your HTML file, include a reference to the JavaScript file using the
<script>tag within the<head>or<body>section. - 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:
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