Search code examples
htmlcssstylesheetmamp

CSS doesnt render on index.html

UPDATE: This has been solved. My CSS selector was wrong. Thank you so much for all who responded!

I am just starting out building a site on a local server using MAMP. I have worked on other people's code but am a sort-of novice when it comes to starting from scratch so forgive my naivety. My CSS file wont apply and give me the proper background color for my header. I have two stylesheets, style.css and 960.css (downloaded from 960.gs).

Upon going to index.html, 960.css renders on the page but style.css is nowhere to be found. They are in the same folder, and called exactly the same on index.html. Please help.

My file structure:

-project
   -styles
      style.css
      960.css
   index.html

The code is as follows:

index.html

<html>
 <head>
    <link rel="stylesheet" type="text/css" href="/styles/style.css"/>
    <link rel="stylesheet" type="text/css" href="/styles/960.css"/>
    <title>title</title>
 </head>
 <body>
  <div id="header_container" class="container_12">
   <div class="grid_2">
    <h1>Title</h1>
   </div>
  </div>
 </body>
</html>

and style.css

#header_container .container_12 {
  background-color: #000000;
}

If you are not familiar with the 960 grid system, all it does is provide div classes and measurements for them. The container_12 you are seeing is in 960.css but is only set with dimensions, not background color so I dont believe it is necessary to include 960.css as it is pretty long. It may be an issue with MAMP, but I'm sure this is a simple mistake somewhere in the code, but I've been working on this issue so long im just braindead at this point. Thank you so much for any input/suggestions you have. If I have not made myself clear anywhere or I need to explain something in more detail please let me know! Thanks again.

Solution

  • This CSS selector you have written is wrong.

    #header_container .container_12 {
  background-color: #000000;
}

    Use

    #header_container {
      background-color: #000000;
    }

    or

       .container_12 {
      background-color: #000000;
    }