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

Lite Souris
Lite Souris
5,425 Points

connecting the CSS to HTML

Hello I'm having trouble getting my CSS and HTML docs to connect together. I can't figure out why It won't connect cause it looks like how the guy in the video did it. Maybe i'm missing a step or forgot to put something is the code.

Here is my html where I connect them together.

      <meta charset="utf-8">
       <title>Lite Souris | Student</title>
      <link rel"stylesheet" href"css/normalize.css">
      <ink rel"stylesheet" href"css/our.css">
  </head>  ```

Here is my css that i have so far.
   ```  body {
          background-color: green;
   }
   a {
         text-decoration: none;
   }

   #wrapper {
       max-width: 940px;
       margin: 0 auto;
   }```

If you could help me figure out why I wont work. I would thank you.
Lite Souris
Lite Souris
5,425 Points

I don't know how to quote things to show you.

You are missing two things:

first one is = equal sign next is, in the second link, l is missing.

<head> 
   <meta charset="utf-8"> 
   <title>Lite Souris | Student</title> 
   <link rel="stylesheet" href="css/normalize.css"> 
   <link rel="stylesheet" href="css/our.css"> 
</head>

I hope this helps as well.

4 Answers

Erik McClintock
Erik McClintock
45,783 Points

Lite,

In your link tag, you need to put equals signs at the attribute declarations, like this:

<head>
<meta charset="utf-8">
<title>Lite Souris | Student</title>
<link rel="stylesheet" href="css/normalize.css">
<ink rel="stylesheet" href="css/our.css">
</head>

Missing characters are the most prominent and one of the hardest issues to diagnose when you're first starting out, but you'll pick it up. Hope this helps!

Erik

Erik McClintock
Erik McClintock
45,783 Points

Just in case that was at all confusing, to clarify, I mean that in your link tag, when you say rel and href, you were missing the equals sign (=) before you specified the attribute values of stylesheet and css/normalize.css, etc.

Does that phrasing make it more confusing? Haha

Erik

Erik McClintock
Erik McClintock
45,783 Points

And a missing "l" it looks like in one of your link tags. Small mistakes, easy to make, hard to spot!

You should start the quote with 3backtics followed by html. Then copy the HTML code and close with 3backticks.

To your problem

You can link CSS to any HTML document with link element.

<link rel="stylesheet" href="">

rel attribute is a relationship between your HTML and CSS. So you should add stylesheet. Because it is styling your HTML document.

href attribute is hyberlink reference to CSS file. You can add the address relative to your current HTML document. If your HTML and CSS are in the same folder you can just add the name of your CSS in there.

href Example

In the same folder and CSS file name is style.css

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

In one folder level down, folder name is css and CSS file name is style.css

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

In one folder level up, CSS file name is style.css

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

I hope this helps and if you have any questions please feel free to ask here.

Regards,

Karthikeyan Palaniswamy

Wrap your code with 3 backticks (```) on the line before and after.

Aleem Mohamed
PLUS
Aleem Mohamed
Courses Plus Student 7,011 Points

Could it be a typing error?

You have...

<ink rel"stylesheet" href"css/our.css">

It looks like you're missing the "l" in link and some equal signs...

<link rel="stylesheet" href="css/our.css" type="text/css">