How to Link CSS and JavaScript files to your HTML file.mp4

Download Video: How to Link CSS and JavaScript files to your HTML file.mp4

✅ 1. Linking a CSS file to HTML

CSS controls the styling and layout (colors, fonts, spacing, etc.).

📁 Folder structure (recommended)

project/
 ├─ index.html
 └─ styles.css

🔗 Add this inside the `<head>` section of your HTML:

<link rel="stylesheet" href="styles.css">

✔ Example HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

✔ Example CSS (`styles.css`)

h1 {
  color: blue;
  font-family: Arial;
}

✅ 2. Linking a JavaScript file to HTML

JavaScript controls interaction and behavior (clicks, animations, forms, etc.).

📁 Folder structure

project/
 ├─ index.html
 └─ script.js

🔗 Add this before the closing `</body>` tag (BEST PRACTICE):

<script src="script.js"></script>

Placing it at the bottom ensures your page loads first — then JS runs.

✔ Example HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1 id="title">Hello World</h1>

  <script src="script.js"></script>
</body>
</html>

✔ Example JavaScript (`script.js`)

document.getElementById("title").style.color = "red";

⚠ Common Mistakes to Avoid

❌ Wrong path example

<link rel="stylesheet" href="/styles.css">

This only works if the CSS is in the ROOT directory.

❌ Forgetting the file extension

<script src="script"></script>

❌ Putting <script> in <head> without defer
This can block page loading.

🔹 Optional: Using JS in the `<head>` (with defer)

If you want scripts in <head>, add defer:

<script src="script.js" defer></script>

defer makes the script run after the page loads.

🔹 Optional: Linking Files in Sub-Folders

Example structure

project/
 ├─ index.html
 ├─ css/
 │   └─ styles.css
 └─ js/
     └─ script.js

HTML

<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>

🎯 Summary Cheat-Sheet

Purpose	Tag	Where it goes
Link CSS	`<link rel="stylesheet" href="file.css">`	Inside `<head>`
Link JS	`<script src="file.js"></script>`	Before `</body>` (or `<head>` with `defer`)

Enjoy! Follow us for more...

XLAR8 - All About tech | Tech terms | etc.