Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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,559 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,559 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>

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!

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

Kallil Belmonte
Kallil Belmonte
35,559 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">

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

Kallil Belmonte
Kallil Belmonte
35,559 Points

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

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

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! :)