HTML not loading CSS file

I am completely stumped as to why this doesn’t work. It seems the HTML file can’t load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem?

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>

style.css

body{
    background-color: #F9F9F9;
    background-image: url(images/bg3.png);
    background-position: center top;
    background-repeat: repeat;
    text-shadow: #FFFFFF 0px 1px 0px;
    font-family: "Georgia", "Times", serif;
    -webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
}

#main{
    margin: 50px auto 50px auto;
    width: 1000px;
    min-height: 500px;
    padding: 0px 20px 0px 20px;
}

The above doesn’t work. Adding the css inline in index.html works fine though

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
    body {
        background-color: #F9F9F9;
        background-image: url(images/bg3.png);
        background-position: center top;
        background-repeat: repeat;
        text-shadow: #FFFFFF 0px 1px 0px;
        font-family: "Georgia", "Times", serif;
        -webkit-font-smoothing: antialiased;
    }
    a {
        text-decoration: none;
    }
    #main {
        margin: 50px auto 50px auto;
        width: 1000px;
        min-height: 500px;
        padding: 0px 20px 0px 20px;
    }
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
    <div id="main"> Hello </div>
</body>
</html>

Related Posts:

  1. How to make a monopoly board using css grid?
  2. Half circle with CSS (border, outline only)
  3. How to horizontally center an element
  4. Unblur content inside blurring background div
  5. How to set a border for an HTML div tag
  6. Setting table column width
  7. Why does z-index not work?
  8. How to center an iframe horizontally?
  9. Creating a nav bar with flexbox
  10. Is element block level or inline level?
  11. How to line-break from css, without using
    ?
  12. How to put img inline with text
  13. How to center a “position: absolute” element
  14. How do I make an image smaller with CSS?
  15. Two divs side by side – Fluid display
  16. What is sr-only in Bootstrap 3?
  17. How to place a text next to the picture?
  18. FontAwesome icons are not showing, Why?
  19. Remove border from IFrame
  20. How to change text transparency in HTML/CSS?
  21. CSS horizontal scroll
  22. Bootstrap 4 images thumbnail classes
  23. How do I set a background-color for the width of text, not the width of the entire element, using CSS?
  24. AngularJS ngClass conditional
  25. How to darken a background using CSS?
  26. text-overflow: ellipsis not working
  27. How to reference nested classes with css?
  28. Placing border inside of div and not on its edge
  29. Why is there an unexplainable gap between these inline-block div elements?
  30. How to apply CSS to iframe?
  31. Draw a line in a div
  32. CSS centred header image
  33. Change Color of Fonts in DIV (CSS)
  34. Why is “cursor:pointer” effect in CSS not working
  35. How to move text up using CSS when nothing is working
  36. How to style input and submit button with CSS?
  37. a href link for entire div in HTML/CSS
  38. How to align content of a div to the bottom
  39. How to outline text in HTML / CSS
  40. How to draw a dotted line with css?
  41. Brackets – Live Preview not working
  42. How to stick text to the bottom of the page?
  43. How to make blinking/flashing text with CSS 3
  44. HTML iframe – disable scroll
  45. CSS set li indent
  46. Why does this CSS margin-top style not work?
  47. How to center content in a Bootstrap column?
  48. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  49. HTML list-style-type dash
  50. Why doesn’t height: 100% work to expand divs to the screen height?
  51. How can I position my div at the bottom of its container?
  52. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery
  53. Why doesn’t height: 100% work to expand divs to the screen height?
  54. How can I position my div at the bottom of its container?
  55. How do I install a custom font on an HTML site
  56. How to overlay one div over another div
  57. How to align an input tag to the center without specifying the width?
  58. How can I embed video for discord directly from website?
  59. Basic CSS – how to overlay a DIV with semi-transparent DIV on top
  60. difference between width auto and width 100 percent
  61. How to show text on image when hovering?
  62. Square brackets in CSS
  63. How do I disable form fields using CSS?
  64. Place input box at the center of div
  65. Fit background image to div
  66. body background color not showing?
  67. Table scroll with HTML and CSS
  68. Set cellpadding and cellspacing in CSS?
  69. how to do a line break in Bootstrap 3.3.7
  70. CSS content property: is it possible to insert HTML instead of Text?
  71. Vertical align not working on inline-block
  72. How to increase height of textarea using bootstrap rows and columns
  73. Indent List in HTML and CSS
  74. Absolute position is not working
  75. Position absolute but relative to parent
  76. How do you specify table padding in CSS? ( table, not cell padding )
  77. Is it possible to put CSS @media rules inline?
  78. Make padding responsive
  79. Two Divs next to each other, that then stack with responsive change
  80. Vertically align text next to an image?
  81. SVG drop shadow using css3
  82. Force table column widths to always be fixed regardless of contents
  83. Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
  84. Using Numbers With Font Awesome
  85. Full Page < iframe >
  86. Change cursor to hand when mouse goes over a row in table
  87. CSS table td width – fixed, not flexible
  88. Is it possible to use css to shrink text to automatically fit the size of the div
  89. How to make Bootstrap Panel body with fixed height
  90. word-wrap break-word does not work in this example
  91. Change navbar text color Bootstrap
  92. Create a slanted edge to a div [duplicate]
  93. How can I align text directly beneath an image?
  94. how do I get the bullet points of a

Leave a Comment