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 trialMuhammad Nauman
6,940 Pointshow do i add the font family to css
cant seem to add the open sans to the h1 selector
<!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=Open+Sans" 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>© 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, h2 {
color: #fff;
font-family: 'Open Sans', sans-serif;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
2 Answers
christian lian huat toh
7,213 PointsThe challenge said that you should apply it to the h1 but in your css you applied it to both h1 and h2 you should create a new rule with only h1 tag on it and then apply the font-family like this:
h1 { font-family: "Open Sans", sans-serif; }
tedc
3,320 Pointshahaha Christian, beating me to every answer while I try to be thorough :P
Muhammad Nauman
6,940 Pointsthat doesn't work either
tedc
3,320 PointsHi Muhammad,
For the test to pass, make sure you only have the font family as written in your code under a h1 selector only, and remove it from the combined h1, h2 selector, as this will not pass.
I have attempted the challenge replicating the h1,h2 selector error as you have encountered, and can confirm changing this as Christian and I have suggested should pass the test. Hope this helps :)
tedc
3,320 Pointstedc
3,320 PointsHi Muhammad,
This is an understandably confusing error, as what you can done is actually correct and would work fine on a browser. It is just the exact parameters of the challenge are to apply this property to the CSS selector h1 alone and not alongside h2 as you have done. Try putting the font family on only h1 as a separate selector and this should work fine :)