Background color not working in css but works when the style is added in html. The rest of the style-CodePudding

I'm trying to add a background color to my header but it's not adding it when i have it written in the css file.

HTML Code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
  </head>
  <!--
    <style media="screen">    
      #background-color {
      background-color: hsl(120, 1%, 79%);
      padding-top: 20px;
      padding-bottom: 20px;
    }
    </style>
  -->
      <header id="background-color">
         <hr>
         <p>Sample</p>
         <hr>
      </header>
</html>

CSS Code: CSSPage.css

    #background-color {
      background-color: hsl(120, 1%, 79%);
      padding-top: 20px;
      padding-bottom: 20px;
    }

It only works when it's on HTML but not when it's on the css file.

I've also tried adding !important but it didn't do anything.

The rest of the styles for other id works except this one.

CodePudding user response：

Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.

CodePudding user response：

I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.