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 CSS Foundations Selectors Type Selectors

Posted by Randhir Rana
Randhir Rana
4,754 Points

I am not sure why I cannot link my html to css?

I am confused as to why I can't seem to get my html to link to css so the external styles are shown on the browser.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Rana,

Can you post the <head> section of your html page?

Are you doing this locally or in workspaces?

4 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Rana;

You have a typo in:

<link rel="stylsheet" href="css/style.css"/>

Your missing an "e" in stylesheet. ;-)

Happy coding,

Ken

Randhir Rana
Randhir Rana
4,754 Points

Thanks! That did the trick lol!

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

I have a macbook and I am using sublime text editor 2 and here is my html:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Selectors</title>
    <link rel="stylsheet" href="css/style.css"/>
</head>
<body>
    <h1>Learning About <span>CSS Selectors</span></h1>
    <p>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tristique magna.</span> Phasellus sapien mauris, aliquet quis ullamcorper nec, vestibulum eu tortor. Duis id venenatis augue. Suspendisse mauris eros, hendrerit vitae posuere nec, aliquet eget magna. Vivamus quis nunc non ipsum imperdiet pharetra id ac metus. Vestibulum aliquet eu velit in pulvinar. Donec feugiat quam leo, vel pulvinar quam pellentesque pretium.
    </p>
    <h2>Selectors Match <span>HTML Elements</span></h2>
    <p>
        Vestibulum malesuada, orci id consectetur congue, justo augue porta lorem, at varius turpis mauris sit amet est. Ut vulputate dictum vestibulum. <span>Integer at vestibulum lacus</span>, venenatis auctor diam. Duis luctus, leo at ultrices placerat, est ante placerat leo, vitae tempor lorem augue a sem. Tiam vitae porta libero. Proin ac eros non lacus scelerisque elementum. Integer vulputate enim non eros tincidunt, sed laoreet sapien.
    </p>
    <p>
        Pellentesque posuere risus a purus auctor sagittis. Quisque lorem ligula, imperdiet vel faucibus vitae, mollis at leo. Proin ac commodo odio, sed tempor nibh. Nunc vel mauris in quam ultrices ornare. Aenean sagittis eget magna ut sodales.
    </p>
</body>
</html>
Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

Here is my CSS:

body {
    background-color: #cadde5;
    padding: 40px;
}

h1 {
    color: #2980b9
    font-size: 40px;
}

h2 {
    color: #e74c3c;
}
Blaize Pennington
Blaize Pennington
13,878 Points
Blaize Pennington
Blaize Pennington
13,878 Points

Make sure you are linking to the correct file. Also I don't know if this breaks the page but here is my syntax for a link <link rel="stylesheet" type="text/css" href="css/style.css">

Make sure your css file is titled style.css and is located inside the css folder. Next make sure your index.html file is in the parent folder to the css folder, if it is not you may have to type ../css/style.css

Next try the type="text/css" I honestly don't know if it is required, but I always put it.

Oh and you do not need to close your link tag with the / at the end.