CSS Internal vs External Style Sheets

I'm creating a webpage and I began using the style tag at the top:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Front Page</title>
    <link rel="stylesheet" type="text/css" href="CSS/Styles.css" /> 

    <style type="text/css">
    </style>
</head>
<body>
</body>
</html>

I want all my graphics design to be in my Styles.css but for some reason, it just doesn't work. When I add something like:

div.box {
        margin:0 auto;
        width:500px;
        background:#222;
        position:relative;
        left: 50px;
        top: -200px;
        height: 100%;
        border:1px solid #262626;
        padding: 0 5px 5px 0;
    }

To design this element:

<div class="box"></div>

It works when I put it in the tag, above the document, but not if I put it in the CSS file. It wasn't a problem before but now I've been adding everything to the style tag and it's getting really long (150 lines!). I want to move it all to the css file so my main page has less to scroll through. But I don't understand why the graphical changes just won't apply if put in the CSS file. Any ideas?

Solution

If your CSS file's path is alright, there are several things that may have happened:

It's possible that you simply need to clear your cache. CTRL+F5 usually does the trick. New users coming to your site won't need to do that.
It's possible that you've had a typo, or forgot to close a statement above with ;, check for that.
It's possible that this is a specificity issue, i.e. another rule, more specific is overriding your rules. Read about it here.