Really need some help styling html - html

Question

I can't seem to figure out why my style attributes aren't having an effect on my divs. The only one that seems to work is the body tag.
It's for a course I'm currently doing. I feel like I've tried everything but can't get it to work. I'm pretty sure it's something minor that I'm missing but it is really frustrating me.
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
float: left;
}
PageBanner {
margin: 0;
width: 100%;
float: none;
width: 50px;
}
NavBar {
background: #FD0C10;
}
Header {
text-align: center;
margin-bottom: 20px;
}
Subheading {
text-align: center;
}
Content {}
Footer {}
body>
<div wrapper="Mainwrapper">
<div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner"></div>
<div class="Navbar">
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="Header">
<h1>The Club Site</h1>
</div>
<div class="SubHeading">
<h2>Members Prices</h2>
</div>
<div class="Content">
</div>
<div class="Footer">
</div>
</div>
<!--Mainwrapper-->
</body>

Answer 1

Have the css class definition like .PageBanner which will work like you expected PageBanner refers to a tag with name PageBanner. And #PageBanner refers to an element which has id PageBanner
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
float: left;
background: color: red;
}
.PageBanner {
margin: 0;
width: 100%;
float: none;
width: 50px;
background:red;
}
.NavBar {
background: #FD0C10;
}
.Header {
text-align: center;
margin-bottom: 20px;
}
.Subheading {
text-align: center;
}
.Content {}
.Footer {}
<div wrapper="Mainwrapper">
<div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner">
</div>
<div class="Navbar">
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="Header">
<h1>The Club Site</h1>
</div>
<div class="SubHeading">
<h2>Members Prices</h2>
</div>
<div class="Content">
</div>
<div class="Footer">
</div>
</div>
<!--Mainwrapper-->

Answer 2

You need to put a CSS Selector
to make your style work.
Selector Example Example description
.class .Header Selects all elements with class="Header"
<div class="Header">
#id #firstname Selects the element with id="firstname"
<input id="firstname">
Please do read this link for more info about CSS Selector Reference.
https://www.w3schools.com/cssref/css_selectors.asp

Answer 3

The answer has been given. But make sure to pay close attention to how you write your CSS because this case you were trying to define a class but was missing the dot .class but also you can do ids which are defined #class. You had a good approach you were just missing the signifying selector.