CODEWITHSUNDEEP
htmlcssbrowserserver
Wesley
Wesley

Reputation: 155

My browser doesn't interprete my css files

I just started a very simple exercise and I created a simple html file and a css file (inside css folder), in order to learn more about Angularjs. The exercise starts by creating these 2 files (so no Angularjs yet).

For some reason the css file is not rendered in any of my browsers. On Chrome, I inspected the index.html file, and click on resources and the Css file is there! but its not working.

I don't know what to do, but it seems a very stupid error. I've read in a couple of places that it maybe related to a file called nginx.conf

index.html

<!DOCTYPE HTML>
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Test Your Knowledge: Saturn</title>
     <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
     <body>
       <div id="myQuizz">


      </div>
  </body>
</html>

css/style.css

body { background-color: #fff; padding: 20px; }

#myQuiz {
 font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
 width: 650px; height: 650px;
 position: relative;
 overflow: hidden;
 color: #fff;
 background: #000 url(.../images/background.jpg) no-repeat 0px 0px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight: 100;} 
#myQuiz h3 {font-size: 2.4em; margin: 0px; font-weight: 100;}
#myQuiz p { margin: 0px 0px 14px 0px; }
#myQuiz .btn{
 display: inline-block;
 cursor: pointer;
 background-color: #c04b01;
 color: #fff;
 text-decoration: none;
 padding: 5px 15px;
 border-radius: 6px;
}
/* Intro */
#myQuiz  .intro { position: absolute; top: 225px; left: 40px; width: 550px;}
#myQuiz .intro p { margin: 0px 0px 40px 0px; }

Upvotes: 0

Views: 87

Answers (4)

jmancherje
jmancherje

Reputation: 6633

As other people noticed, you misspelled your id inline your HTML div tag. So change id="myQuizz" to id="myQuiz".

<div id="myQuiz"></div>

I created a fiddle, It corrects the myQuiz typo, and adds a generic background so you can see it. I also added 

background-size: 100%;
background-position: center;

Just so you can see the background

http://jsfiddle.net/hb7du2xq/

Upvotes: 2

Shiloh Forest
Shiloh Forest

Reputation: 1

Other than checking your link path to your stylesheet(css must be in a folder called 'css'), I agree with Wesley, you must put content inside your div to be able to see anything. Such as:

<p>Hello World.</p>

Copy and paste that inside this:

<div id="myQuizz">

</div>

So that it looks like this:

<div id="myQuizz">
    <p>Hello World.</p>
</div>

Upvotes: 0

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4578

After some time,I managed to get your error and it has nothing to do with the css file or your browser. It's just a typo in your code.

Just change the id of your div from <div id="myQuizz"> to <div id="myQuiz">.This is because you used #myQuiz{.....} in your css

Upvotes: 0

K. Kashyap
K. Kashyap

Reputation: 23

buddy, either remove one "z" from id="myQuizz" ... or add one more "z" to your css selectors like #myQuizz .... browser is not interpreting the stles because it isn't able to find one. :)

Upvotes: 0

Related Questions