The three ways to add CSS to an HTML page

You connect a style sheet to HTML using a <link> tag in the <head> section of your document. This is the standard method and the one you should use for most projects. The tag tells the browser where to find your CSS file and loads it when the page opens.

There are two other ways to add styles — writing CSS directly inside an HTML file using a <style> tag, or adding styles to individual elements using the style attribute — but linking an external file is cleaner, faster to load, and easier to maintain across multiple pages.

Key Takeaways

  • Place a <link rel="stylesheet" href="filename.css"> tag in the <head> section of your HTML file, not in the body.
  • The href attribute tells the browser where to find your CSS file — use the correct file path, whether the file is in the same folder or a subfolder.
  • External style sheets load once and explore to every page that links to them, so changes to the CSS file update your whole site at once.
  • If styles are not appearing, check that the file path is correct, the file exists, and the browser cache is cleared.

The correct syntax for linking a style sheet

Open your HTML file in a text editor and find the <head> section — this is where all the invisible setup information goes, above the <body> tag. Inside the <head>, add this line:

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

Replace styles.css with the actual name of your CSS file. The rel="stylesheet" attribute tells the browser that this is a style sheet. The href attribute is the path to your file. If your CSS file is named main.css and sits in the same folder as your HTML file, write href="main.css". If it is in a subfolder called css, write href="css/main.css".

File paths: same folder, subfolders, and parent folders

The href value is a path that tells the browser where to look for your file. If your HTML file and CSS file are in the same folder, the path is just the filename: href="styles.css".

If your CSS file is inside a subfolder, include the folder name: href="css/styles.css" or href="assets/css/styles.css". Use forward slashes, even on Windows.

If your CSS file is in a parent folder — one level up from your HTML file — use two dots and a slash: href="../styles.css". Each ../ moves up one folder level. For example, href="../../styles.css" goes up two folders.

Absolute paths that start with http:// or https:// also work: href="https://example.com/styles.css". This is useful when linking to a style sheet hosted on a different website, but for your own files, use relative paths so your site works whether it is on your computer, a test server, or a live domain.

When to use external style sheets instead of inline styles

An external style sheet is a separate file that your HTML pages link to. This approach scales: you write your CSS once, link it from every page, and changes to the CSS file update your entire site when ready. If you have ten pages and need to change a color, you edit one CSS file instead of ten HTML files.

Inline styles — the style attribute added directly to an HTML tag — are useful only for quick tests or one-off exceptions. Writing <p style="color: blue;"> works, but if you use this method across many pages, you end up repeating the same code over and over, and updating it becomes a nightmare.

A <style> tag inside the <head> section lets you write CSS inside your HTML file without linking to an external file. This is fine for small projects or single pages, but it still mixes your HTML and CSS together, making both harder to read and maintain.

Checking that your style sheet is actually loading

If you linked your CSS file but the styles are not appearing, the file path is usually the problem. Open your browser's developer tools by pressing F12 (or Cmd+Option+I on Mac), click the Console tab, and look for error messages. The browser will tell you if it cannot find the file.

Check the file path in your <link> tag. Make sure the filename and folder names match exactly — styles.css is not the same as Styles.css on most servers. Verify that the file actually exists in the location you specified.

If the path looks correct, clear your browser cache. Browsers sometimes hold onto old versions of files. In most browsers, press Ctrl+Shift+Delete (or Cmd+Shift+Delete on Mac), select Cached images and files, and click Clear. Then reload your page.

Multiple style sheets and the order they load

You can link more than one CSS file to the same HTML page. List them one after another in the <head> section:

<link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="styles.css"><link rel="stylesheet" href="theme.css">

The order matters. If two files style the same element differently, the last one wins. In the example above, if both styles.css and theme.css set the color of paragraphs, the rule in theme.css will be used. This is useful when you want a base style sheet and then override it with a theme or custom file.

Frequently Asked Questions

Do I put the link tag in the head or the body?

Always put it in the <head> section, above the <body> tag. The browser reads the <head> first and loads all the style sheets before displaying the page. If you put the <link> tag in the body, the page may display unstyled for a moment while the CSS loads.

What is the difference between href and src?

The <link> tag uses href because it is linking to a related resource. The <img> and <script> tags use src because they are embedding a source file directly into the page. For style sheets, always use href.

Can I link to a CSS file on another website?

Yes. Use the full URL: <link rel="stylesheet" href="https://example.com/styles.css">. This is common for fonts and icon libraries. However, if that website goes down or changes the file, your styles break. For your own CSS, keep the files on your own server.

Why is my CSS not working even though the file is linked?

Check three things: the file path is correct and matches the actual folder structure, the CSS file name is spelled exactly right (including uppercase and lowercase), and you have cleared your browser cache. Also verify that your CSS syntax is correct — a missing semicolon or bracket can break the entire file.