Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Hardy Huang
Hardy Huang
304 Points

How do I link to a css file from a html file?

I am using notepad++ for my html file, I try to link a css file to the html file but I cannot get the address for it... Help.

<html> <head> <meta charset="utf-8"> <title>Beryllium</title> <link rel="stylesheet" href="css/BerylliumCSS.css"> </head> <body> <header> <h1>This is beryllium</h1> </header> <section> <a href="http://www.periodictable.com/Samples/004.16/s13.JPG"> <img src="http://www.periodictable.com/Samples/004.16/s13.JPG" width="440" height="400" alt="Beryllium Image"> </a> <h2>Beryllium</h2> <footer> </footer> </section> </body> </html>

/****** The CSS file ******/

header { color: blue; }

3 Answers

Lukas Coffey
Lukas Coffey
20,382 Points

I don't see any problems with your code, it might just be location problems within your folder. If your CSS file is in a sub-folder, you can link to it via a /, for example sub-folder-name/BerylliumCSS.css. Just make sure you have all the right folders and folder names listed or it won't be able to find the file.

It's good practice (like you've already done) to put CSS files in a subfolder and keep index.html in the root folder.

Also make sure your CSS file and folder name is spelled correctly, it's also case-sensitive. I do that all the time, I'll spell it wrong and can't figure out what's going on!

Hope this helps! :)

Ian Hazelton
Ian Hazelton
6,187 Points
Ian Hazelton
Ian Hazelton
6,187 Points

(I think) it's because you're using a relative link for something that is absolute. It's best practice to have your html and css is in the same folders, or a sub folder. eg.

<link rel="stylesheet" href="../Beryllium.css">

<link rel="stylesheet" href="css/Beryllium.css">

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

Where is the CSS file in relation to your html file?

If its in the same folder you can link to it directly with this;

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

Your code;

<link rel="stylesheet" href="css/BerylliumCSS.css">

Will work if the css file BerylliumCSS.css is located in a folder named "css" inside the same directory as your html file.

remember that folders and file names are case-sensitive.