The Head, CSS/JS & Standards›Core· 45 min read

How HTML Connects to CSS & JavaScript

The bridge lesson. See exactly how the three web languages plug into your HTML — the mental model you will use forever.

What you will learn

Add CSS three ways: inline, internal and external
Add JavaScript to your HTML
Understand the role HTML plays in every framework

HTML is the foundation — always

You have built the structure. CSS adds style, JavaScript adds behaviour. Both attach to your HTML.

Three ways to add CSS

Way	How	Best for
Inline	`style="..."` on an element	A one-off tweak
Internal	A `<style>` block in the `<head>`	A single page
External	A `.css` file linked with `<link>`	A whole website (the pro way)

The professional way: an external stylesheet

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

The <link rel="stylesheet" href="styles.css"> tag, placed in the <head>, connects a separate styles.css file to this page. rel="stylesheet" says “this linked file is CSS” and href is its path. One such line can style your entire website — that is why it is the professional approach.

Internal CSS styling the HTML

<style>
  body { font-family: sans-serif; background: #eef2ff; }
  h1   { color: #4338ca; }
  .btn { background: #06b6d4; color: white; padding: 10px 16px; border: none; border-radius: 8px; }
</style>

<h1>Now I have colour!</h1>
<p>CSS changed how this looks — the HTML did not change at all.</p>
<button class="btn">A styled button</button>

Live preview

Here the CSS lives in a <style> block right on the page. Each rule targets something: body sets the page font and background, h1 colours the heading, and .btn (the dot means “the class btn”) styles any element with class="btn" — which is why the button looks the way it does. Notice the HTML stayed plain; only the CSS changed how it looks.

Note: Output: A light-purple page with a sans-serif font, an indigo “Now I have colour!” heading, and a rounded cyan button.

Adding JavaScript

JavaScript usually goes in a .js file linked with <script> just before </body>. A tiny taste of behaviour:

JavaScript reacting and changing the page

<button onclick="alert('Hello from JavaScript!')">Click me</button>

<p id="output">JavaScript can change this text.</p>

<script>
  document.getElementById('output').textContent = 'Changed by JavaScript! 🎉';
</script>

Live preview

Two bits of behaviour: the button’s onclick runs a line of JavaScript that shows a pop-up when clicked. The <script> block at the bottom finds the paragraph by its id="output" and rewrites its text — so although the HTML says “JavaScript can change this text.”, the page actually displays the new message. That is JavaScript adding interactivity on top of your HTML.

Note: Output: A “Click me” button (which alerts “Hello from JavaScript!”) and a paragraph that reads “Changed by JavaScript! 🎉” — not its original text.

The big picture

Stack	How HTML fits
Plain websites	You write HTML files directly.
PHP / Laravel	The server builds HTML and sends it to the browser.
MERN (React)	React generates HTML in the browser (JSX becomes HTML).
Any framework ever	It all ends as HTML the browser renders.

Tip: This is why we start with HTML and reuse it in every CodingClave course. Master it now and every future technology becomes easier — you will already understand what they produce.

Q. Which tag links an external CSS file to your HTML page?

Answer: <link rel="stylesheet" href="..."> in the <head> connects an external CSS file. <script> is for JavaScript.

✍️ Practice

Create a styles.css file, link it, and change the page background and heading colours.
Add the click-button example and make the alert say your own message.

🏠 Homework

Link a real external styles.css to a page you built and give it some basic colour. You are now using two web languages together.