Module 7: Head and Metadata · Lesson 4 of 5
How to Link CSS and JavaScript to HTML (With defer)
All lessons in Module 7
- Title and Charset
- Viewport and Description
- Favicon and Social Previews
- Linking CSS and JavaScript
- Project: Complete Head
Goal: Hook a stylesheet and a script file up to your page from the head.
Learn
HTML gives the page its structure. Two other languages usually come along, each in its own file: CSS for the look and JavaScript for behavior. The head is where you connect them. To watch all three at work, try an online HTML, CSS and JS editor with instant preview (opens in a new tab).
You link a stylesheet with a void element:
<link rel="stylesheet" href="style.css">
A script uses <script> with src. This one is not void, so it always needs </script>:
<script src="app.js" defer></script>
Leave out defer and the browser stops reading your HTML until the script has downloaded and run. The page shows up later. defer means "download it now, run it once the HTML is fully read", so your scripts can sit in the head without slowing anything. The HTML standard gives the exact timing in its script element section (opens in a new tab).
The short version
<link rel="stylesheet" href="style.css">in the head connects a CSS file. It is a void element.<script src="app.js" defer></script>loads JavaScript, and it always needs the closing tag.- Scripts with
deferdownload in parallel and run in order after the HTML has been read. - Paths start from the HTML file, so a stylesheet in a
cssfolder ishref="css/style.css".
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Styled Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Same HTML, new look</h1>
<p>Delete the link line and watch the styles disappear.</p>
</body>
</html>Your task
Night Sky Watchers has its look in style.css and its star map code in app.js. Wire them up inside <head>:
- Link the stylesheet
style.css. You'll see the preview change the moment it is connected. - Add a script that loads
app.jswith thedeferattribute. Don't forget its closing tag.
Lesson previews never run scripts, so Check looks only at your markup.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<!-- the file is saved as css/style.css -->
<link rel="stylesheet" href="style.css">Right
<!-- the file is saved as css/style.css -->
<link rel="stylesheet" href="css/style.css">The browser looks exactly where href points, and with the folder name missing you get a 404 and no styles.
Wrong
<head>
<script src="app.js"></script>
</head>Right
<head>
<script src="app.js" defer></script>
</head>Without defer the script runs before the body exists, so it can't find your elements, and the whole page waits for it.
Go deeper
Stylesheets and scripts behave differently while a page loads. A stylesheet in the head is render-blocking: the browser waits for it before it paints anything. Here that is exactly what you want, because it prevents a flash of unstyled content (opens in a new tab). So CSS goes in the head, never at the bottom of the body.
Order counts as well. If two linked stylesheets set the same property on the same element with equal specificity, the one linked later wins. Link the general file first and page-specific files after it.
Browsers cache external files. A visitor downloads style.css once and reuses it on every page of your site, a big reason to use a file instead of pasting styles into each page. The external stylesheet lesson builds one step by step.
Modern JavaScript often uses <script type="module" src="app.js"></script>. Module scripts are deferred automatically and don't need the attribute.
If a file seems to be ignored, open DevTools, switch to the Network tab and reload. A red 404 line shows the exact path the browser tried.
Frequently asked questions
How do I link a CSS file to HTML?
Add <link rel="stylesheet" href="style.css"> inside <head>. The href is the path from the HTML file to the CSS file, so a stylesheet in a folder needs the folder too: href="css/style.css". Match the file name exactly, capital letters included. Because of case sensitivity (opens in a new tab), most web servers treat Style.css and style.css as two different files.
What is the difference between async and defer?
Timing. Both download the script without pausing the HTML. defer waits until the whole document has been read, then runs the scripts in the order they appear. async runs each script as soon as it arrives, in any order, maybe before the page is complete. Use defer for your own page code and async for standalone scripts such as analytics.
Should script tags go in the head or at the end of the body?
In the head, deferred. Older tutorials put scripts at the end of <body> so they would not block the page. A <script defer> in the head does better: the browser finds it early and starts the download straight away, but runs it only once the HTML is ready. You get the same safe timing and a faster start. The script reference lists every attribute.
