Home Generate Find My Site Pricing Blog Documentation Buy Me a Coffee

How to Link CSS & JavaScript Files on Your Static Website

Your HTML is the skeleton. Learn how to add CSS 'skin' and JavaScript 'muscles' to bring your static site to life.

Last Updated on July 17, 2026 by The DriveX Team
Diagram showing HTML, CSS, and JavaScript files linking together

You've written your index.html file. You open it in the browser, and... it's just black text on a white background. It's functional, but it's not beautiful or interactive.

To fix this, you need to connect your other files. In web development, we use three core languages:

  • HTML (HyperText Markup Language): Provides the structure (the skeleton).
  • CSS (Cascading Style Sheets): Provides the style (the skin).
  • JavaScript (JS): Provides the behavior and interactivity (the muscles).

This guide will show you the correct, modern way to link your CSS and JavaScript files so your website actually works.

Part 1: How to Link Your CSS File

To add your style.css file, you use the <link> tag. This tag tells the browser, "Hey, go grab this other file; it's a stylesheet."

The <link> tag must be placed inside your <head> section.

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

Let's break that down:

  • rel="stylesheet": This tells the browser *what* the file is. In this case, it's a stylesheet.
  • href="style.css": This is the "hyperlink reference," or the *path* to your file. This is the most common place to make a mistake.

The Most Important Part: File Paths

The href attribute is critical. If your index.html and style.css are in the same folder, href="style.css" works perfectly.

But what if you organize your files into folders?

  • If style.css is in a folder named css, the path would be: href="css/style.css"
  • If style.css is one folder *up*, the path would be: href="../style.css"

This is called a relative path—the path is "relative" to the location of your index.html file.

Part 2: How to Link Your JavaScript File

To add your script.js file, you use the <script> tag. This tag tells the browser to fetch and run a JavaScript file.

Best practice: Place your <script> tag just before the closing </body> tag.

<!DOCTYPE html>
<html>
<head>
    <title>My Awesome Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Hello World!</h1>

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

Let's break this down:

  • src="script.js": This is the "source" of the script. Just like with CSS, this is a file path.

Pro Tip: Use `defer`

Placing the script at the end of the body ensures your HTML content loads *before* the script, so your site feels fast. An even better modern way is to put it in the <head> and add the defer attribute, like this:
<script src="script.js" defer></script>. This tells the browser to download the script but wait to run it until the HTML is finished loading.

Part 3: The DriveX Way (Using Full URLs)

The methods above work perfectly when all your files are in the same folder structure on your computer. But when you use a hosting service like DriveX, your files are hosted individually from Google Drive.

Because your index.html and style.css are separate public files, they don't know where each other are. You can't use a relative path like "style.css".

Instead, you must use the full, absolute URL for each file.

When you create your site on DriveX, we give you a unique URL for each file you upload. Your HTML should look like this:

<!DOCTYPE html>
<html>
<head>
    <title>My Site on DriveX</title>
    
    <!-- This is an ABSOLUTE URL -->
    <link rel="stylesheet" href="https://drvx.net/YourSiteName/style.css">

</head>
<body>

    <h1>Hello World!</h1>
    <img src="https://drvx.net/YourSiteName/hero.png" alt="My hero image">

    <!-- This is also an ABSOLUTE URL -->
    <script src="https://drvx.net/YourSiteName/script.js" defer></script>

</body>
</html>

This is the key to making your site work on DriveX: always use the full URL for your assets (CSS, JS, and images) inside your index.html file.

Your Site is Now Connected!

Congratulations! You now know the difference between relative and absolute paths, and you're ready to build a fully functional, beautiful website. Whether it's a simple project on your computer or a live site on DriveX, you have the skills to link it all together.