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

HTML How to Make a Website Customizing Colors and Fonts Resize Text

Chris Carr
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Carr
Front End Web Development Techdegree Student 12,900 Points

CSS 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>

evannex
evannex
2,436 Points

Is 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)

2 Answers

Chris Carr
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Carr
Front End Web Development Techdegree Student 12,900 Points

Thanks 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>&copy; 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;
}

Hi, 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
evannex
2,436 Points

Okay 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