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

CSS

Posted by Emily Mitchell
.a{fill-rule:evenodd;}techdegree
Emily Mitchell
Front End Web Development Techdegree Student 8,599 Points

How do I get my css style sheet to connect with my index.html using Sublime Text?

I'm in the CSS Foundations class adding CSS to a page. I downloaded Sublime Text to follow along with the class, but I've run into a problem since I've only used Treehouse Workspaces before.

I'm trying to link my css style sheet in my index.html file, but my CSS code isn't taking effect on the site.

Is it an issue of where/how the files are saved on my PC and Sublime Text?

4 Answers

Attila Vago
Attila Vago
Courses Plus Student 15,286 Points

Hi Emily,

No worries, we've all been there, done that. :) First of all the line that connects your index.html to your css file should look something like this and should go in between the 

<head></head>

tags.

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

Now, as a general rule, you should put the css file into a separate folder called css or styles just like I did in the above code sample, but leave the index.html in the root folder of your project. Hope this helps.

Emily Mitchell
seal-mask
.a{fill-rule:evenodd;}techdegree
Emily Mitchell
Front End Web Development Techdegree Student 8,599 Points
Emily Mitchell
.a{fill-rule:evenodd;}techdegree
Emily Mitchell
Front End Web Development Techdegree Student 8,599 Points

Thanks so much! This is only my second class so all the basics are still pretty new to me.

Attila Vago
Attila Vago
Courses Plus Student 15,286 Points

Glad to have been able to help. :) I remember about 3 years ago I had the same dilemmas. Today I am employed as a full-stack web developer, so keep going, you're on the right track. ;) After Treehouse, you might want to take a look at CodeSchool too.

mike howie
mike howie
1,953 Points
mike howie
mike howie
1,953 Points

I am having the same problem. here is my code. I find nothing wrong with it?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mike Howie | Designer </title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/main.css" type="text/css" media="screen"> </head> <body> <header> <a href="index.html"> <h1>Mike Howie</h1> <h2>Designer </h2> </a> <nav> <ul> <li> <a href="index.html"> Portfolio</a> </li> <li> <a href="about.html">About </a> </li> <li> <a href="contact.html">Contact </a> </li> <li> <a href="myfirstwebpage.html"> My first Webpage </a></li> </ul> </nav> </header> <section> <ul> <li> <img src="numbers-01.jpg"> </li> </ul> </section> <footer> <a href="https://www.facebook.com/michaelbhowie"><img src="facebook-wrap.png"></a> <p>© 2015 Mike Howie. </p> </footer>

</body> </html>

Attila Vago
PLUS
Attila Vago
Courses Plus Student 15,286 Points
Attila Vago
Attila Vago
Courses Plus Student 15,286 Points

Look at the answer I gave to Emily. It's the same exact thing you need to do. If you don't have a "head" tag declared inside which you call the .css file, there's no way on earth the browser will know it needs that file. Also, it does not matter if it's Sublime Text or any other editor. The rule applies every time: declare your path to the css file in the head tag.