I'm currently in the process of developing a website and I have started utilizing the style tag at the beginning:
<!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>
All my visual design elements are intended to be within my Styles.css file, however, for some reason, it's not functioning as expected. When I include something like this:
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 style this element:
<div class="box"></div>
It works fine when placed in the <style> tag above the document, but doesn't work if included in the CSS file. Previously, this wasn't an issue, but now that I've been adding everything to the style tag and it's becoming quite lengthy (150 lines!), I would like to transfer all of it to the css file to reduce the amount users have to scroll through on the main page. However, I can't seem to figure out why the visual changes are not being applied when moved to the CSS file. Any suggestions?