css file isn't being recognized

I have a very new site I am trying to put together and it seems that my css file isn't being recognized.

The site is http://www.problemio.com and I have in my index.php a direction to pick up the css file like this:

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

and then a header div declaration like this where some of the initial styles are used:

<?php
include("divs/header.php");
?>

I am trying to go through the index.php file with firebug, but not sure how to tell if the css file is being开发者_运维技巧 recognized or something else is the problem.

Any ideas how to get the styles recognized?

You have to link to the CSS Reset before you link to your own styles.

The way you set it up now, the CSS Reset is resetting your styles.

Change this:

<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>

to this:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>

Loaded CSS:

grids-min.css

main.css

menusystem.css

reset-min.css

Reset is loading after the others, which nullifies the majority of your settings.

This is probably because of the order you are loading the CSS files. You are loading your "main.css" file first, then the YUI reset CSS, which basically resets whatever your main.css file has set already. Try loading the reset first.

The stylesheet appears to be loading fine. You need to put it after the reset styles though, or the reset will get rid of most of yours.

  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
  <link rel="stylesheet" type="text/css" href="main.css"/>
  <link rel="stylesheet" type="text/css" href="menusystem.css"/>

If the problem you think you are seeing is related to the sign-in links, note that they are set to color:#fff;, which happens to match the background...

Depending on your browser, Ctrl+Shift+I (Chrome), Ctrl+Alt+I (Safari), F12 (IE9), or Firebug (Firefox) can show you which resources are loaded... You should probably get comfortable with the developer modes for each.