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
Chris Carr
Front End Web Development Techdegree Student 12,900 PointsCSS Style Not Being Applied
After following along with the video and making changes to my css the h1 and h2 tags don't apply the css.
Should I include the header tag in my css selector?
h1 { color: #fff; font-family: 'Roboto', sans-serif; margin: 15px 0; font-size:1.75em; font-weight:bold; }
h2 { color: #fff; font-family: 'Roboto', sans-serif; }
<link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css? family=Open+Sans|Roboto" rel="stylesheet"> <link rel="stylesheet" href="css/main.css">
<header> <a href="index.html" id="logo"> <h1>Chris Carr</h1> <h2>Web Developer</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>
2 Answers
Chris Carr
Front End Web Development Techdegree Student 12,900 PointsThanks for the response.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chris Carr | Web Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css? family=Open+Sans|Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Chris Carr</h1>
<h2>Web Developer</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 id="gallery">
<li>
<a href="img/horombokibo.jpg">
<img src="img/horombokibo.jpg" alt="">
<p>Kibo peak from camp Horombo on Mt. Kilimanjaro.</p>
</a>
</li>
<li>
<a href="img/kosamuibiker.jpg">
<img src="img/kosamuibiker.jpg" alt="">
<p>Biker tearing up the streets on Ko Samui.</p>
</a>
</li>
<li>
<a href="img/eswain3.jpg">
<img src="img/eswain3.jpg" alt="">
<p>Model Ellie.</p>
</a>
</li>
<li>
<a href="img/bourgasharbour.jpg">
<img src="img/bourgasharbour.jpg" alt="">
<p>Boats at Bourgas harbour, Bulgaria. </p>
</a>
</li>
<li>
<a href="img/teidepanorama.jpg">
<img src="img/teidepanorama.jpg" alt="">
<p>Teide peak.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="#"><img src="img/twitter-wrap.png" alt="twitter logo"></a>
<a href="#"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
<p>© 2017 Chris Carr.</p>
</footer>
</div>
</body>
</html>
/*********************
General
**********************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
a {
color: #4a99e3;
text-decoration:none;
}
img {
max-width: 100%;
}
/*********************
Navigation
**********************/
nav {
text-align: center;
padding: 10px 8;
margin: 20px 0 0;
}
/*********************
Portfolio Page
**********************/
#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 {
text-align: center;
margin: 0;
/*padding: 5%;*/
font-size: 0.75em;
}
/*****************************
Colours
******************************/
body {
background: #fff;
color: #3068A0;
}
header {
background: #dfdfdf;
border-color: #C6C6c6;
}
h1 {
color: #fff;
font-family: 'Roboto', sans-serif;
margin: 15px 0;
font-size:1.75em;
font-weight:bold;
}
h2 {
color: #fff;
font-family: 'Roboto', sans-serif;
}
nav {
background: #d3d3d3;
}
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #3068A0;
}
/*********************
Footer
**********************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 58px;
color: #dfdfdf;
}
web pad
4,483 PointsHi, how did you attach your code here in the forum so that it will be inside that black page? Every time I attach my code, it is in paragraph format, not like the code you attached which is easier to read.
evannex
2,436 PointsOkay so at first glance, I see two possible problems. In your HTML the link for your font has a space in the href. Try removing that. And then in your CSS, you forgot your unit in the Nav Selector padding: 10px 8;
Try those first, for me your code works as is, so that is all I can think to try. If it doesn't work, let me know I'll try something else! :D
evannex
2,436 Pointsevannex
2,436 PointsIs your
<link>tag inside your<head>tag?If possible could you add your entire html and entire css page here, inside code blocks? (3 ` characters before and after the code)