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 Chris Beyer
Chris Beyer
969 Points

I in the css font styling for "How to build a website". Says error I have inputted:

This is my input below. It is the same as example and Google Font description but it doesn't work. It says set the font family for a level 1 heading yet. I have tried for an hour and a half to solve. Please help!!!!

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

h1, h2 { color: #fff; font-family: 'Sans Pro', sans-serif; }

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Daniel Gauthier is correct. The reference to the font is incorrect. However, there are two other errors. You have also set the color to white and you've set it for both the h1 and the h2. The challenge never asks for any changes to the h2 and also never mentions anything about setting the color to white. So if I change your CSS rule to this, it passes:

h1 { 
    font-family: 'Source Sans Pro', sans-serif; 
}

Hope this helps! :sparkles:

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Jennifer,

Good call :D

I didn't even realize this was for a code challenge. I was suffering tunnel vision trying to see where he was going wrong.

Great work :D

Chris Beyer
Chris Beyer
969 Points

Thank you both,

I will try this right away. My main CSS had been setup with h1,h2 and a color of white. I had though that funny.

Thank you! I will try this right now.

SIncerely,

Chris

Daniel Gauthier
Daniel Gauthier
15,000 Points

Also going to run through the challenge again, and I'll post the passing code using your selected font just in case you run into more issues.

Also, I tested the name required for the font and it's definitely "Source Sans Pro" :D

I deleted my previous answer to clean up this set a little as well (for future readers wondering what Jen is referencing above).

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey again Chris,

Also, I noticed while running through this again that Nick already has the text set to white, so don't change that :D

Throwing up the working code to match against in the event you run into anymore issues with this challenge:

HTML: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

CSS:

a {
  text-decoration: none;
}

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

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

h1, h2 {
  color: #fff;
}

h1 {

  font-family: "Source Sans Pro", sans-serif;
  font-size: 1.75em;
  font-weight: normal;

}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

Good luck getting through this one, and if you run into anymore weirdness, just post back :D

Chris Beyer
Chris Beyer
969 Points

Yes worked perfectly and was able to go on to challenge question and quiz. I really thank you. This is a terrific community.

Chris-

Daniel Gauthier
Daniel Gauthier
15,000 Points

Awesome :D

Good luck with the next section!