Connecting CSS to HTML

What you will learn

• Explain why CSS often lives in its own file.
• Recognize the beginner pattern for linking a stylesheet to an HTML page.
• Understand what href points to in a stylesheet link.
• Notice a few common beginner connection mistakes.

Why CSS often lives in a separate file

Beginners often learn CSS in its own file because that keeps structure and styling easier to manage.

When the page grows, separate files make updates calmer, cleaner, and more reusable.

Calm setup

One file can hold the HTML structure while another holds the CSS styling rules.

How the connection works

The HTML page uses a link element to point toward the stylesheet. That tells the browser where the styling rules live.

A beginner usually sees a pattern like this in the page head: link rel="stylesheet" href="styles.css".

Key pattern

The href value points to the CSS file the browser should load.

What href is doing

href gives the file destination. In this case, that destination is the stylesheet file.

If the filename or path is wrong, the page may load but the styles will not appear the way you expect.

Small but important

A tiny path mistake can break the visual result even when the HTML still loads.

Common beginner connection mistakes

A few common mistakes are placing the wrong filename in href, forgetting the stylesheet relationship, or saving the CSS file with the wrong extension.

These are usually small fixes, which makes this a good early lesson for calm debugging habits.

Check the basics first

File name, extension, and link values are the first things to inspect.

What to remember before lesson 3

CSS rules do not help until the browser can find the stylesheet.

Once the page is connected to the stylesheet correctly, the next step is learning how selectors and simple rules target the right parts of the page.

Take this forward

The stylesheet connection comes before useful CSS rules.