Connect HTML, CSS and JavaScript

Three files, three jobs

HTML defines the heading, button and message. CSS styles their appearance. JavaScript responds to the button click and changes the message. Keeping these jobs in separate files makes the small project resemble real websites and lets you change one concern without rewriting the others.

Create one folder containing index.html, styles.css and script.js. Their filenames and letter case must match the references in index.html. The example below is a single-file preview so you can run it here; the three snippets after it show the separate files for your local folder.

Write the three files

The link element in head loads styles.css. The script element loads script.js; defer waits until HTML parsing is complete before running the script, so the button and message exist when querySelector looks for them. The type="button" attribute prevents the button from accidentally submitting a form if it is later placed inside one.

In script.js, addEventListener attaches a click handler to the button. When clicked, the handler selects the paragraph and replaces its textContent. aria-live="polite" asks assistive technology to announce the updated message without interrupting the current reading task. The code changes text rather than injecting markup.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Study reminder</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main>
    <h1>Study reminder</h1>
    <button id="reveal" type="button">Show reminder</button>
    <p id="message" aria-live="polite">Press the button to reveal a message.</p>
  </main>
</body>
</html>

styles.css

body { font: 1rem/1.5 system-ui, sans-serif; margin: 2rem; }
button { padding: .6rem 1rem; }

script.js

document.querySelector('#reveal').addEventListener('click', () => {
  document.querySelector('#message').textContent = 'Take one small step today.';
});

Run and troubleshoot

Open index.html in a browser. The heading and button should appear with spacing; clicking the button should change the paragraph. If you remove the CSS link, the content and click behaviour still work but the spacing changes. If you remove the script, the button remains visible but no longer changes the text.

If nothing happens when you click, check that the id values match the selectors, that script.js is saved in the same folder and that the browser Console shows no loading or syntax error. If styles are missing, inspect the href spelling and path. A server is unnecessary for this small local demonstration, although advanced browser APIs may require one.

• The link element
• The script element
• Adapt this project to the Playground
• Debugging and validation

Syntax

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

Examples

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Study reminder</title>
  <style>
    body { font: 1rem/1.5 system-ui, sans-serif; margin: 2rem; }
    button { padding: .6rem 1rem; }
  </style>
</head>
<body>
  <main>
    <h1>Study reminder</h1>
    <button id="reveal" type="button">Show reminder</button>
    <p id="message" aria-live="polite">Press the button to reveal a message.</p>
  </main>
  <script>
    document.querySelector('#reveal').addEventListener('click', () => {
      document.querySelector('#message').textContent = 'Take one small step today.';
    });
  </script>
</body>
</html>

Best practices

• Keep linked file paths relative to the HTML file and check their spelling.
• Use defer when a script in head needs parsed page elements.
• Start with meaningful HTML before adding styling or behaviour.

Browser compatibility

Related HTML documentation

Specifications & further reading

• MDN: Getting started with CSS
• MDN: Adding interactivity
• WHATWG HTML Standard: Script processing