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 kalyanpalepu2
kalyanpalepu2
495 Points

Challenge Task 2 of 3 doesn't seem to grade properly for me

I have the correct code that previews correctly on my local pc, but when I try to have it graded, it doesn't work. The relevant code that I have is: h1{ color: #f2f2f2; font-family: "Righteous", sans-serif; margin-top: 0; margin-bottom: 0; font-size: 10em; }

I also do have h1 tags in my code, and my font is correct.

index.html 
<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <title>KingSting | Projects</title>
  <link rel = "stylesheet" href = "css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Righteous|Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
  <link rel = "stylesheet" href = "css/style.css">
  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/favicon/favicon-194x194.png" sizes="194x194">
  <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/favicon/android-chrome-192x192.png" sizes="192x192">
  <link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="/favicon/manifest.json">
  <link rel="shortcut icon" href="/favicon/favicon.ico">
  <meta name="apple-mobile-web-app-title" content="KingSting">
  <meta name="application-name" content="KingSting">
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
  <meta name="msapplication-config" content="/favicon/browserconfig.xml">
  <meta name="theme-color" content="#29d1e8">
</head>

<body>
  <header>
    <div id = "name">
      <a href = "index.html">
        <img src = "img/logo.svg" id = logo>
        <h1>KingSting</h1>
      </a>
    </div>
    <nav>
      <ul>
        <li><a href = "index.html" class = "selected">Homepage</a></li>
        <li><a href = "botball-library.html">Botball Library</a></li>
        <li><a href = "botball-documentation-gen.html">Botball Documentation Generator</a></li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
    <section>
      <ul>
        <li>
          <a href = "img/logo.svg">
          <img src = "img/logo.svg" alt = "">
          <p>My temporary logo</p>
          </a>
        </li>
      </ul>
    </section>
    <footer>"Crown" icon used in logo isby Patrick Brentano from <a href = "thenounproject.com">the Noun Project</a></footer>
  </div>
</body>
</html>
css/main.css 
/*META*/
a{
  color: #222;
  text-decoration: none;
}

a:visited{
  color: #333;
  text-decoration: none;
}

body{
  background: white;
  color: #101010;
  font-family: "Roboto Slab", sans-serif;
}



/*HEADER*/
header{
  background: #f44336;
  border-color: #599a68;
}

#logo{
  max-width: 100px;
  max-height: 100px;
  margin-bottom: 0;
}

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


h1{
  color: #f2f2f2;
  font-family: "Righteous", sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 10em;
}

nav{
  background: #d44336;
  text-align: center;
  padding: 105px, 0, 105px;
}

nav a, nav a:visited{
  color: #e2e2e2;
  font-family: "Righteous", sans-serif;
}

nav a:hover{
  color: #fff;
}

nav a.selected, nav a.selected:visited, nav a.selected:hover{
  color: #a2a2a2;
}



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



/*FOOTER*/
footer{
  margin-top: 60px;
  color: #aaa;
  font-size:.8em;
}

footer a{
  color: #888;
}

footer a:hover{
  color: #ccc
}

1 Answer

Micheal Allen
Micheal Allen
19,311 Points
Micheal Allen
Micheal Allen
19,311 Points

You might be facing issues as your html has spaces before and after = (equal) symbols seperating the values from their respective attributes ( there are 17 instances where this occurs )

eg:

<!-- Your Code at the moment -->
<link rel = "stylesheet" href = "css/style.css">

<!-- what your code should be -->
<link rel="stylesheet" href="css/style.css">

try filter through all your html fixing the id's, classes and links and remove these spaces and see how you go.

Hope this helps :)

kalyanpalepu2
kalyanpalepu2
495 Points

Unfortunately, this didn't work, but thanks for the pointer about html naming convention :)