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 CSS: Cascading Style Sheets Use ID Selectors

nydia subur
nydia subur
1,459 Points
Posted by nydia subur
nydia subur
1,459 Points

background not changing despite everything right (i suppose)

https://teamtreehouse.com/workspaces/22461532

codebyamir
codebyamir
12,108 Points

Can you post your code?

Nicholas Vogel
Nicholas Vogel
12,318 Points
Nicholas Vogel
Nicholas Vogel
12,318 Points

It's best if you copy and paste your code, we can't see your specific workspaces window.

nydia subur
nydia subur
1,459 Points
nydia subur
nydia subur
1,459 Points

index.html:

<!DOCTYPE html> <html> <head>

<meta charset ="utf-8">
<title> Nydia | Designer </title>
<link rel"stylesheet" href="css/normalize.css">
<link rel"stylesheet" href="css/main.css">

</head>

<body> <header> <a href="index.html"> <h1> Nydia Subur </h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href = "index.html">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"image cant be found">
          <p> Experimentation with colors and texture</p>
        </a>
      </li>

      <li>
        <a href ="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt"image cant be found">
          <p> playing with blending modes</p>
        </a>
      </li>

      <li>
        <a href ="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt"image cant be found">
          <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"image cant be found">
          <p> Drips created using photoshop brushes</p>
        </a>
      </li>

      <li>
        <a href ="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt"image cant be found">
          <p> creating shapes using repetition</p>
        </a>
      </li>

    </ul>
  </section>
</div>
<footer>
  <a href="https://twitter.com">
  <img src="img/twitter-wrap.png" alt="twitter logo">
  </a>
  <a href ="https://www.facebook.com/profile.php?id=100008477770564">
  <img src="img/facebook-wrap.png" alt ="facebook logo">
  </a>
  <p>&copy; nydia subur's private property </p>
</footer>

</body>

</html>

main.css:

a{ text-decoration:none; }

wrapper{

max-width: 940px; margin:0 auto; padding: 0, 5%; background: grey;

}

4 Answers

annabrandt
annabrandt
6,094 Points
annabrandt
annabrandt
6,094 Points

your links in the HTML I think should be coded like this: <link href="css/normalize.css"> <link href="css/main.css"> Hope it will work!

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Nydia,

I notice that in your padding property you have a comma separating the 0 and 5%. This might be why your background isn't showing. Syntax errors and typos on one line will often cause the next property inside the rule to not work properly.

Also, don't forget the hash symbol (#) when targeting id's, otherwise none of your css properties will apply.

#wrapper {
    max-width: 940px;
    margin: 0 auto; 
    padding: 0 5%;    /* Remove the comma
    background: grey;
}
nydia subur
nydia subur
1,459 Points
nydia subur
nydia subur
1,459 Points

removed the comma, still no changes

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Did you also remember to add the hash symbol to #wrapper? It was missing in your original code.

nydia subur
nydia subur
1,459 Points
nydia subur
nydia subur
1,459 Points

yes. Ive even tried deleting all my code in main.css and only wrote:

body{ background-color: orange; }

but nothing happens. Seems like the problem is with connecting the html to my css .. but again i suppose I've written everything right

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Nydia,

I think I figured out your issue, however I still had some problems in getting it to work in workspaces. You are missing the equal signs between "rel" and "stylesheet" in your <link> elements:

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

But for some reason the workspace wouldn't save the changes I made. Even if I closed and reopened my workspace, it would still revert back to the missing equal signs. Maybe it is an issue with Firefox on my end, or the way I created a new workspace to try and troubleshoot this.

But if adding the equal signs still doesn't work for you, try doing the following (this worked for me):

1) Clear your browser cache

2) Delete both <link> elements, save index.html and close workspaces, and close your previewed web page.

3) Reopen workspaces, and add in the correct <link> elements with the equal signs (as shown above), save your file and preview the web page.

It should work after this.

Another thing I noticed, aside from the css syntax errors, is that you are missing an equal sign in your "Contact" href attribute.

Hopefully this works for you.