CODEWITHSUNDEEP
htmlcsscss-selectors
David Ogburn
David Ogburn

Reputation: 33

CSS Class Selector not functioning

Hello I am so sorry if this is a stupidly simple question but I am extremely new to html and css. The issue is I am trying to just add style to the div classes I have made in html and css seems to not recognize the file. 

.main-content {
  background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="second.css">
</head>
<body>
  <div class="site">
      <header class="masthead">
      </header>

      <h1 class="page-title">Hello
      </h1>

      <main class="main-content">
      </main>

      <aside class="sidebar">
      </aside>

      <footer class="footer">
      </footer>
  </div> <!-- .site -->
</body>
</html>

I have tried on both firefox and chrome so it does not seem to be an issue of using an outdated browser. Also copy and pasting the code into codepen.io also yields the same results. The only way I can style is by selecting general elements such as h1. I've also double checked to make sure first.html and second.css are indeed the correct file names.

Any suggestions as to what I am missing? If its something very simple could I also get some advice so that I don't go about asking a ton of really simple questions like this.

Upvotes: 3

Views: 203

Answers (1)

ShellZero
ShellZero

Reputation: 4651

As you don't have content inside your main tag, the styling is not visible. Add some content to it and you will see the styles which you have applied.

And also you mentioned that you want to style your div and I see only one. You can style it as follows using its class name.

.site {
 background-color: red;
}

Upvotes: 3

Related Questions