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 How to Make a Website Customizing Colors and Fonts Add Fonts

Posted by Elizabeth Chipendo
Elizabeth Chipendo
Courses Plus Student 6,468 Points

In your CSS, apply your font to the first level headline using font-family. Include a sans-serif fallback

In your CSS, apply your font to the first level headline using font-family. Include a sans-serif fallback

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>                                                                                        h1 {
h1 font-family: 'Changa one', sans-serif; 
}
      <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/main.css 
a {
  text-decoration: none;
}

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

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

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}
jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

You need something like:

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

Basically split up the h1 and h2 headings into separate code blocks.

7 Answers

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey Elizabeth Chipendo , you're currently getting an error message on this challenge because you've added the styles inside the html while it should be added to the css file. other than that you correctly referenced the font and also the fallback, just remember to also use an opening bracket before the declaration (from the code I only see the closing bracket after it). in the css it should look like this at the end:

h1 {font-family: 'Changa one', sans-serif;}

hope that helps and have a nice day ;)

Alexis Arinze
Alexis Arinze
3,291 Points
Alexis Arinze
Alexis Arinze
3,291 Points

this is soo frustrating. I'm typing everything right, and it still says im doing it wrong.

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey Alexis Arinze , you might want to share your code with us - then we'll try our best to help you out ;)

Alexis Arinze
Alexis Arinze
3,291 Points
Alexis Arinze
Alexis Arinze
3,291 Points

Im typing: h1 {font-family: 'Changa One', sans-serif; } right after the header element. But it keeps saying its not in the right place.

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey Alexis Arinze , the problem might not be your code but the place you added it. the css should be added to the css file, from your explanation you added it into the html file after the header. try adding it to the css file instead and you should be fine ;)

Alexis Arinze
Alexis Arinze
3,291 Points
Alexis Arinze
Alexis Arinze
3,291 Points

This may sound like a stupid question to you, but where would the css file be in the code?

Alexis Arinze
Alexis Arinze
3,291 Points
Alexis Arinze
Alexis Arinze
3,291 Points

My bad, nevermind. I see it now I didnt even realize that was there.

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

no worries, it can be easily overseen. glad to hear you found it and I assume everything's working fine now.

Jeremiah Brawner
Jeremiah Brawner
3,933 Points
Jeremiah Brawner
Jeremiah Brawner
3,933 Points

i have everything right but is says im incorrect

Luis Garcia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Luis Garcia
Full Stack JavaScript Techdegree Graduate 22,338 Points
Luis Garcia
.a{fill-rule:evenodd;}techdegree seal-36
Luis Garcia
Full Stack JavaScript Techdegree Graduate 22,338 Points

Make sure you're in your .css file and NOT your .html when entering your code.