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 Charlene Kibenwa
Charlene Kibenwa
432 Points

CSS Not working... Why? :(

I haven't been able to effect any of these changes on my project. What am I doing wrong? I've checked and re-checked the code a few times. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Charlene Kibenwa | Designer</title>
    <link rel="stlyesheet" href="css/normalize.css">
    <link rel="stlyesheet" href="css/main.css">
 </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Charlene Kibenwa</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li><li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li><li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop brushes.</p>
            </a>
          </li><li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>     
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/kibenwa"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2016 Charlene Kibenwa.</p>
      </footer>
     </div>
  </body>
</html>

Here's my CSS bit:

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px
  margin: 0 auto;
  padding: 0 5%;
}

#logo {
  text-align: center;
  margin: 0;
}

a {
  color:#6ab47b;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}

h1, h2 {
  color: #fff;
}

nav {
  background: #599a68;
}

nav a, nav a:visited {
  color: #fff;
}

nav a.selected, nav a:hover {
  color: #32673f;
}

body {
  background-color: #fff;
  color: #999;
}

Formatted by Moderator

Jeremy Hill
Jeremy Hill
29,567 Points

Can you format your code? It would make it easier to identify the problem.

2 Answers

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Here's your problem:

As pointed out by Kevin Dang 

<link rel="stlyesheet" href="css/normalize.css">
<link rel="stlyesheet" href="css/main.css">

Check the spelling of 'Stylesheet'

Charlene Kibenwa
Charlene Kibenwa
432 Points

Oh my goodness, a typo?? LOL I feel so silly. Thank you!!!!!

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Haha, it happens to everyone at some point :D

Kevin D
Kevin D
8,646 Points
Kevin D
Kevin D
8,646 Points

You might need to put the hash key or dot in front of your classes/ids.

So for wrapper, you assigned it as an 'id'. So you would need to include the hash (#) symbol when calling it in CSS.

i.e. #wrapper {}

Same thing for your logo element: #logo {}

If you set one of your elements as a class, you would use the dot symbol (.) e.g. .wrapper {}

Edit: Also, there seems to be a spelling mistake when you link your CSS. You wrote stylesheet like this: "stlyesheet"