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

Posted by Tyler Gerber
Tyler Gerber
Courses Plus Student 1,523 Points

CSS is linked to HTML document, but won't display the changes in the preview screen as I make them. Please help!

This is my current code. Everything appears to be linked accordingly, but it still won't make the changes in the preview...

//This is index.html//

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ty Gerber | Cyber Bullying Prevention</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"></a> <h1>Ty Gerber</h1> <h2>Cyber Bullying Prevention</h2> <nav> <ul> <li><a href=index.html>Portfolio</a></li> <li><a href=index.html>About</a></li> <li><a href=index.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>Experimenting 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-03.jpg"> <img src="img/numbers-03.jpg" alt=""> <p>Trying to create an 80's style of glows. </p> </a> </li> <li> <a href="img/numbers-04.jpg"> <img src="img/numbers-04.jpg" alt=""> <p>Drips created using PhotoShop brushes. </p> </a> </li> <li> <a href="img/numbers-05.jpg"> <img src="img/numbers-05.jpg" alt=""> <p>Creating shapes using repetition. </p> </a> </li> </ul> </section> <footer> <a href=https://twitter.com/789_316><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href=https://facebook.com/CyberRiskReduced><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© Ty Gerber</p> </footer> </div> </body> </html>

//This is main.css//

wrapper {

max-width: 940px; margin: 0 auto; background: orange; }

Thanks!

8 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Nop...

Resuming, trys this:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Ty Gerber | Cyber Bullying Prevention</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

I think you should wrap the first part of your code into "head" tags, like this:

<head>
<meta charset="utf-8">
<title>Ty Gerber | Cyber Bullying Prevention</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>

And what rest into "body" tag:

<body>
<header>
  <a href="index.html"></a>
    <h1>Ty Gerber</h1>
    <h2>Cyber Bullying Prevention</h2>
  <nav>
    <ul>
      <li><a href=index.html>Portfolio</a></li>
      <li><a href=index.html>About</a></li>
      <li><a href=index.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>Experimenting 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-03.jpg">
          <img src="img/numbers-03.jpg" alt="">
          <p>Trying to create an 80's style of glows. </p>
        </a>
      </li>
       <li>
        <a href="img/numbers-04.jpg">
          <img src="img/numbers-04.jpg" alt="">
          <p>Drips created using PhotoShop brushes. </p>
        </a>
      </li>
       <li>
        <a href="img/numbers-05.jpg">
          <img src="img/numbers-05.jpg" alt="">
          <p>Creating shapes using repetition. </p>
        </a>
      </li>
    </ul>
  </section>
  <footer>
    <a href=https://twitter.com/789_316><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
    <a href=https://facebook.com/CyberRiskReduced><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
    <p>&copy; Ty Gerber</p>
  </footer>
  </div>
</body>
Tyler Gerber
PLUS
Tyler Gerber
Courses Plus Student 1,523 Points
Tyler Gerber
Tyler Gerber
Courses Plus Student 1,523 Points

It won't show it in the post, but it is wrapped in a <head></head> and in a <body></body>. I'll try re-typing it, and see what happens. Thank you for your help!

Tyler Gerber
Tyler Gerber
Courses Plus Student 1,523 Points

The "in a" are head and body. Lol, sorry!

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Also try this:

<link rel='stylesheet' type='text/css' href='css/normalize.css'>
<link rel='stylesheet' type='text/css' href='css/main.css'>

Instead of this:

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Tyler Gerber
PLUS
Tyler Gerber
Courses Plus Student 1,523 Points
Tyler Gerber
Tyler Gerber
Courses Plus Student 1,523 Points

Why just the single quote instead of dual quotes?? Sorry, just curious!

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Actually what matters is the: type='text/css' That you're missing..
You can use double quotes if you want : )

Tyler Gerber
PLUS
Tyler Gerber
Courses Plus Student 1,523 Points
Tyler Gerber
Tyler Gerber
Courses Plus Student 1,523 Points

Ohhh, so css/normalize.css should be flipped to normalize.css/css??

Tyler Gerber
PLUS
Tyler Gerber
Courses Plus Student 1,523 Points
Tyler Gerber
Tyler Gerber
Courses Plus Student 1,523 Points

I figured it out, Kallil! It was some minor user errrors...for some reason, I had to refresh the page, and fix some bug errors with it...thanks for all your help, though! Very much appreciated! :)