Search code examples
htmlcssstylesheet

CSS isn't wokring from style sheet link

I've tested this in both FF(29) and IE(11) and they both act the same way.

This is my HTML code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>MiCapture</title>
  <link rel="stylesheet" href="SS1.css" name="main_sheet">  
</head>

<body>
<div id="banner"><img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/sky.gif"></div>
</body>
</html>

This is my CSS file "SS1.css"

<style  type="text/css">

          #banner {
             margin-left:auto; 
             margin-right:auto; 
             width:1000px;  
          }

          #banner img { 
             max-width:1000px; 
             max-height:300px; 
          }

</style>

When I load my page, my image does not get centered, but if I change my HTML and include my CSS directly in my code, it does get centered. Why does the link not work?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>MiCapture</title>
  <style  type="text/css">

          #banner {
             margin-left:auto; 
             margin-right:auto; 
             width:1000px;  
          }

          #banner img { 
             max-width:1000px; 
             max-height:300px; 
          }

</style>    
</head>

<body>
<div id="banner"><img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/sky.gif"></div>
</body>
</html>
Solution

  • The stylesheet file does not need <style></style> tags which you have included in it, removing them will solve your issue.