Linking external .css file to Html page

I'm having trouble linking my external file sheet to the separate html page. The .css file and html file are in the same folder also but when i run it the content is only appearing. Any help is appreciated. Thanks!

CSS Code

div
{
    border-radius:5px;
}

#header
{
    z-index:1;
    width:97.%;
    height:60px;
    background-color:red;
    margin-top:-20px;
    margin-bottom:10px;
    position:fixed;
}

#name
{
    float:left;
    margin-left:5px;
    padding-top:5px;
    font-size:16px;
    font-family:Verdana, sans-serif;
    color: #ffffff;
}

#email
{
    float:left;
    margin-left:5px;
    padding-top:5px;
    font-size:16px;
    font-family:Verdana, sans-serif;
    color: #ffffff;
}


#sidebar
{
    left:90px;
    top:160px;
    position:fixed;
    width:200px;
    height:600px;
    background-color:gray;
}

#content
{
    left:290px;
    top:160px;
    position:fixed;
    width:600px;
    height:600px;
    background-color:lightblue;
}

p
{
    padding-left: 50px;
    padding-top: 50px;
}

HTML Code

<!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>

<body>
    <div id="page">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">Portfolio</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
    </div>
    <div id="mainPicture">
        <div class="picture">
            <div id="headerTitle">Project</div>
            <div id="headerSubtext">HTML Project</div>
        </div>
    </div>
        <div class="contentBox">
        <div class="innerBox">
            <div class="contentTitle">The Title of an Article</div>
          <div class="contentText"><p>content </p><br />
        <p>Content.</p><br />
          <p>Other Content.</p></div>



    </div>

</body>
</html>

Solution

That's what you need. See there please. I noticed lost div , check your code. http://jsfiddle.net/vo9hLzqf/

If you feel problems with other styles like #email #name etc. check that in HTML you set right type

if your css is #email you should use <div id="email">%yourcode%</div> and .email will be <div class="email">%yourcode%</div>

    <!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>

<body>
    <div id="page">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">Portfolio</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
    </div>
    <div id="mainPicture">
        <div class="picture">
            <div id="headerTitle">Project</div>
            <div id="headerSubtext">HTML Project</div>
        </div>
    </div>
        <div class="contentBox">
        <div class="innerBox">
            <div class="contentTitle">The Title of an Article</div>
          <div class="contentText"><p>content </p><br />
        <p>Content.</p><br />
          <p>Other Content.</p></div>


            </div>
</div>