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

Jordan Feige
Jordan Feige
2,937 Points
Posted by Jordan Feige
Jordan Feige
2,937 Points

Font Size

In this code challenge, it won't say it is correct when I code the font size as h1{font-size: 1.75em;} pretty sure this is correct but it keeps saying it isn't! Please help thanks!

index.html 
<!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|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/cs
    <link rel="stylesheet" href="css/main.css">
   s'>
  </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/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: 'Changa One', sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}
Jesse Lawson
Jesse Lawson
11,159 Points

what does the code challenge say?

Jordan Feige
Jordan Feige
2,937 Points
Jordan Feige
Jordan Feige
2,937 Points

Set the size of your H1 to 1.75 em and the weight to normal.

Jesse Lawson
Jesse Lawson
11,159 Points

rather than

font-weight: normal;

just use

weight: normal;

4 Answers

wuworkshop
wuworkshop
3,429 Points
wuworkshop
wuworkshop
3,429 Points

There's nothing wrong with your original CSS. font-weight is correct. You have a syntax error in your HTML. Some HTML was accidentally moved around.

If you look at the syntax highlighting, the color is wrong around the 3 link elements you have here:

<link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/cs
    <link rel="stylesheet" href="css/main.css">
   s'>

Do you see how the last line is really a part of the second link element? Just change your HTML to the following:

<link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
Jesse Lawson
Jesse Lawson
11,159 Points

ha, ima noob

Jordan Feige
Jordan Feige
2,937 Points
Jordan Feige
Jordan Feige
2,937 Points

I have another question towards my website. I am on the part where it is doing the float and image sizes so there are always two images next to each other. It doesn't want to work for me. Could you check out my code and see what errors I made?

wuworkshop
wuworkshop
3,429 Points

Sure, did you post your code somewhere in the forum?

Jordan Feige
Jordan Feige
2,937 Points
Jordan Feige
Jordan Feige
2,937 Points

/**************** GENERAL ****************/

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

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

/******************* HEADING *******************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0: font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************* NAVIGATION *******************/

NAV{ text-align: center; padding: 10px 0; margin: 20px 0 0; }

/******************* FOOTER *******************/

footer{ font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/******************* PAGE PORTFOLIO *******************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }

/******************* COLORS *******************/

/* site body*/ body{ background: #fff; color: #999; }

/* black header*/ header { background: #2B1B17; border-color: #FF0000; }

/* nav background on mobile*/ nav { background: #726E6D; }

/* logo text */ h1, h2 { color: #fff; }

/* links*/ a { color: #8adbff; }

/* nav link / nav a. nav a: visited { color: #bda456; } /*selected nav link/ nav a.selected, nav a:hover { color: #fff; }

Here is my CSS code.

wuworkshop
wuworkshop
3,429 Points

uh, could you wrap it in the Markdown format for code? Would make it a LOT easier to spot syntax mistakes since we would see the syntax highlighting. Like the way you did it in your original post. Like so:

     body { background: firebrick;}

An easy way to check your code for syntax mistakes is to run it in the W3C's CSS Validation Service. I just copied and pasted your CSS and it came up with a few errors.

Jordan Feige
Jordan Feige
2,937 Points
Jordan Feige
Jordan Feige
2,937 Points

There are a few things wrong with my website and I can't seem to figure them out. For example, the font won't work, I can't get the phone and email logos to be correct on the contact page, and my pictures are still in one column which they should be in like 2 or 3 I think. What is the easiest way for me to send you all of my code for you to check?

wuworkshop
wuworkshop
3,429 Points

By far, the easiest way is to have all your code in a Workspace and then just provide the preview page link.

Also, you should get into the habit of validating your own code to spot for syntax mistakes. Here's W3C's validation tools:

HTML Validation: http://validator.w3.org/#validate_by_input

CSS Validation: http://jigsaw.w3.org/css-validator/#validate_by_input

wuworkshop
wuworkshop
3,429 Points

Hmm... for some reason your link doesn't work. I get this error message:

Workspace Unavailable

This is a preview link for a Treehouse Workspace that is not currently active.

If you are the workspace owner, you can launch it again via the Treehouse site.