Background color of header doesn't change-CodePudding

this is index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Technology Trends</title>
    <link rel="stylesheet" href="style.css">
</head>
<body background="Images/bg2.jpg">
    <header>
        
        <img src="Images/logo2.jpg" alt="logo" width="52" height="39">

        <div>
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">About Us</a>
            <a href="#">Contact Us</a>
        </div>
    </header>
</body>
</html>

this is style.css

*{
    padding: 0;
    margin: 0;
}

body {
    background-size: cover;
}

header{
    background-color: black;
}

hi, I am trying to create a website using HTML and CSS, and would like change the background color of the header. My external css is linked and have given the background-color property for the css selector header. But still it's not working .

Can anyone point out where I've gone wrong?

Thanks in advance.

CodePudding user response：

I tried snippet inline CSS and it work, I think your style.css is in the wrong location or file name? Put style.css and index.html at the same location/folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Technology Trends</title>
    <style>
    *{
          padding: 0;
          margin: 0;
      }

      body {
          background-size: cover;
      }

      header{
          background-color: black;
      }  
    </style>
</head>
<body background="Images/bg2.jpg">
    <header>
        
        <img src="Images/logo2.jpg" alt="logo" width="52" height="39">

        <div>
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">About Us</a>
            <a href="#">Contact Us</a>
        </div>
    </header>
</body>
</html>

CodePudding user response：

Just make a class instead. Like This...

*{
    padding: 0;
    margin: 0;
}

body {
    background-size: cover;
}

.header{
    background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Technology Trends</title>
    <link rel="stylesheet" href="style.css">
</head>
<body background="Images/bg2.jpg">
    
        
        <img src="Images/logo2.jpg" alt="logo" width="52" height="39">

        <div >
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">About Us</a>
            <a href="#">Contact Us</a>
        </div>
    </body>
</html>