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 Grouping and Modifying Selectors

melissa brown
melissa brown
4,670 Points
Posted by melissa brown
melissa brown
4,670 Points

linking CSS

everytime i start a new video i am having trouble linking the css to the html

html code

<!DOCTYPE html> <html> <head> <title>Selector Groups</title>
<link rel="stylesheet" href="css/style.css"> </head>
<body> <div> class="square"></div> <div> class="circle"></div> <div> class="ellipse"></div>
</body> </html>

css code

body { padding-top: 50px; text-align: center; }

/* Shapes */

.square, .circle, .ellipse { display:inline-block; margin: 0 15px; width: 200px; height: 200px; background-color: lightcoral; }

.circle, .ellipse { border-radius::50%; }

.ellipse { height: 120px: }

Mate Maksan
Mate Maksan
2,395 Points
Mate Maksan
Mate Maksan
2,395 Points

link to css file should be inside <head></head> tag and all div inside <body></body> tag

Craig Watson
Craig Watson
27,930 Points

Hi Melissa,

Have you managed to get to the bottom of this as yet??

Craig

3 Answers

Abdullah Binjamea
Abdullah Binjamea
2,618 Points

I have fixed your HTML and CSS take a look:

<!DOCTYPE html>
<html>  <!-- You should include html tag in your html file in order to get recognized correctly by the browsers-->
    <head>  <!-- your title css link should be included in your head tag after html tag-->
        <title>Selector Groups</title>  
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="square"></div>   <!-- You haven't included the class in your div opening tag-->
        <div class="circle"></div>   <!-- You haven't included the class in your div opening tag-->
        <div class="ellipse"></div>   <!-- You haven't included the class in your div opening tag-->
    </body>
</html>  

body { padding-top: 50px; text-align: center; }

/* Shapes */

.square, .circle, .ellipse { display:inline-block; margin: 0 15px; width: 200px; height: 200px; background-color: lightcoral; }

.circle, .ellipse { border-radius:50%; }   // you got double colon here which is why the circle & ellipse aren't rendered properly.  

.ellipse { height: 120px; }   // you've ended the css property here with a colon instead of semi-colon.

that's it! nice try anyway! be patient and do more HW & you should be better by time!

melissa brown
melissa brown
4,670 Points
melissa brown
melissa brown
4,670 Points

hi abdullah, thanks for the response i made the changes that you suggested, but now nothing is coming up on my screen when i refresh the page. its a blank white page and this http://port-80-jmj1bwq19t.treehouse-app.com/ in the address bar?

melissa brown
melissa brown
4,670 Points
melissa brown
melissa brown
4,670 Points

could it be the way i am linking the directories?

melissa brown
melissa brown
4,670 Points
melissa brown
melissa brown
4,670 Points

could it be the way i am linking the directories?

melissa brown
melissa brown
4,670 Points
melissa brown
melissa brown
4,670 Points

could it be the way i am linking the directories?

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Melissa,

You look to be using the link tag correctly but the info on w3schools may help.

Is the problem that your styles don't show up on the page? If so;

  • Is the style sheet in a seperate folder, e.g. css?
  • Is the name of the style sheet correct compared to the link used?
  • Is the link tag included within the head tags?

Hope that helps in some way.

-Rich

Rich Bagley
Rich Bagley
25,869 Points

Hi Melissa,

Notice you're still having problems with this. Did you check the above points?

One quick check would be to change your link:

Change:

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

to:

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

Does this make any difference? If so, it means that your style sheet is in the same directory as your HTML page.

Another check (just to make sure we've covered everything :)) is to check whether your style sheet is named style.css or styles.css (plural).

Let me know anyway.

-Rich

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

Hi Melissa,

Take a close look at your opening div tags. The class for each should be inside that opening tag. Your CSS can't style the .square, .circle or .ellipse because your HTML currently just has 3 normal divs.

Craig Watson
Craig Watson
27,930 Points

That's a great spot Juan!

I wasn't even reading what was in between the tags with any purpose so I missed that completely.

Craig