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

Himanshu Thanvi
Himanshu Thanvi
899 Points
Posted by Himanshu Thanvi
Himanshu Thanvi
899 Points

html and css

I am not able to link html and css files in atom text editor as recommented by Treasure Porth in video , i have followed all the instructions ; need help

6 Answers

Jeff Muday
MOD
Jeff Muday
Treehouse Moderator 28,720 Points
Jeff Muday
Jeff Muday
Treehouse Moderator 28,720 Points

Oh... ok, I think I understand. If the "css" folder is parallel to the "html" folder then you can use this approach below

Try this and see if it works for you:

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

The '..' at the beginning of the path tells the HTML renderer to go 'up' on folder in the path, and then 'descend' into the css folder to find "resume.css"

Himanshu Thanvi
Himanshu Thanvi
899 Points
Himanshu Thanvi
Himanshu Thanvi
899 Points

Masterclass !! , it works sorry for late responce thanlyou sir

Jeff Muday
MOD
Jeff Muday
Treehouse Moderator 28,720 Points
Jeff Muday
Jeff Muday
Treehouse Moderator 28,720 Points

You need to ensure you have the correct path to your CSS files in order for it to be "linked" or available for rendering by the browser. Typically, you'd expect the CSS to be in the same folder or a subfolder of the same directory as the HTML source file. It doesn't have to be this way, though it is a handy convention for learning.

for example, suppose my CSS file is named "styles.css"

We are going to use relative paths rather than absolute paths, both will work, but relative is easiest for now.

If the CSS file is in the same directory as the HTML file, here is the link (below)

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <h1 class="title">Hello World</h1>
  </body>
</html>

If the CSS is in a subfolder like "css"

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
      <h1 class="title">Hello World</h1>
  </body>
</html>
Himanshu Thanvi
Himanshu Thanvi
899 Points
Himanshu Thanvi
Himanshu Thanvi
899 Points

this is my html code 

<!DOCTYPE html>
<html>
  <head>
    <title>Thanvi Himanshu resume</title>
    <link rel="stylesheet" href="css/resume.css" />
  </head>
  <body>
    <img src="http://placeimg.com/200/200/any" alt="Thanvi himanshu, Web developer" class="main-image">
    <h1>Thanvi himanshu, Web developer</h1>
    <h2>Summary of Qualification</h2>
    <ul>
      <li>Experience as a freelancer web developer</li>
      <li>Experience with HTML, CSS, and Javascript</li>
      <li>Bachelor of science , Maths</li>
    </ul>
  </body>

</html>
Himanshu Thanvi
Himanshu Thanvi
899 Points
Himanshu Thanvi
Himanshu Thanvi
899 Points

and this is my css code 

body{
  font-family:"Arial";
}

h1{
  color: blue;
}

.main-image{
  border: 5px solid black;
  border-radius: 50%;
}

where is the error ?

Jeff Muday
MOD
Jeff Muday
Treehouse Moderator 28,720 Points
Jeff Muday
Jeff Muday
Treehouse Moderator 28,720 Points

No errors at all-- it looked like a GREAT start on a resume site.

So... I am assuming you placed the resume.css file in the folder named css. Correct? If so it should work.

If that didn't work, then you might have placed your CSS file in the SAME directory/folder as the resume.html file. If so, then change your link to what is below:

<link rel="stylesheet" href="resume.css" />
Himanshu Thanvi
Himanshu Thanvi
899 Points
Himanshu Thanvi
Himanshu Thanvi
899 Points

I have placed .css and .html in different folders as per video guidence for better in bigger projects and linked "<link rel="stylesheet" href="css/resume.css" /> as it is then too it is not working ? Jeff Muday sir