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

Stumped

I don't understand. My code seems perfect:

Q: "Set the size of you H1 to 1.75 em and the weight to normal"

A:

h1 { font-size: 1.75em; font-weight: normal; }

It's telling me I'm incorrect and to make sure my font size is set to 1.75 em. Can someone please offer some clarity, because I've exhausted all other possibilities other than there being a bug in the quiz. Much appreciated.

20 Answers

Joseph Pietras
Joseph Pietras
2,437 Points

Check out my code below, it passed the course. place your h1 code above the h1,h2 part of your css.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <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>
a {
  text-decoration: none;
}

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

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

h1 {
    font-family:font-family: 'Open Sans', sans-serif;
  font-size:1.75em;
  font-weight:normal;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}
Joseph Pietras
Joseph Pietras
2,437 Points

Try removing the space between the colon and the numeric value.

Your syntax is correct... css is cascading in nature, so check the placement of your code. Also, don't forget to switch to the style.css page on top, you may be in index.html. If not refresh the quiz and try again in a better spot.

Your syntax is correct... css is cascading in nature, so check the placement of your code. Also, don't forget to switch to the style.css page on top, you may be in index.html. If not refresh the quiz and try again in a better spot.

Thank you guys, I've tried all those things and still no luck.

Hi Brady,

Sometimes the code challenge error messages are less than perfect. In the code you're showing I noticed that the font-family rule is missing. Did you remove it in the code challenge?

Jeff

Joseph Pietras
Joseph Pietras
2,437 Points

Brady, Can you post your html and CSS.

Yup, here's the 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; }

h1 { font-family: 'Gilda Display', sans-serif; font-size: 1.75em; font-weight: normal; }

well, it didn't post in proper format, but the nuts & bolts are there

Joseph Pietras
Joseph Pietras
2,437 Points

Try reposting again with this: Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting. Check the markdown cheatsheet link below for how to post code. Thanks!

Joseph Pietras
Joseph Pietras
2,437 Points

are logo and wrapper ids/classes? If they are, you are missing a #for is and . for class prior to the name of the class/id and it might be getting hung up on that.

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;
}

h1 {
  font-family: 'Gilda Display', sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

Nice trick, thanks. There it is! Like I said, totally stumped. Tried everything I can think of. Are you seeing anything I'm not?

Joseph Pietras
Joseph Pietras
2,437 Points

Hmmm nothing that I can see offhand. What css course/exam is this failing in, ill see what my code is and post it.

Alex Tasioulis
Alex Tasioulis
4,950 Points

I just did the challenge with this, soooo, I don't know... Maybe try double quotes instead of single around font-family name?

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;
}

h1 {
  font-family: "Playfair Display SC", sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}
Justin Wiswell
Justin Wiswell
9,471 Points

I just looked through the exam, and passed it using the following code:

h1{
font-family: 'Open Sans', sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

The only thing i did different was use a different font, and placed it right after the anchor styles like this:

a {
  text-decoration: none;
}

h1{
font-family: 'Open Sans', sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

Double check your Google web-font is linked correctly, or maybe try another one?

Project: 'How to Make a Website' -Customizing colors and fonts.

challenge: Add fonts

Joseph Pietras
Joseph Pietras
2,437 Points

also you only need one "font-family" in your css, I miss copied that part. Good-luck!

Eureka! There was a minor glitch in the HTML. Thanks for all the help Joseph & everyone. Movin on!