Cannot change background-color in CSS

I want to change the background-color in a CSS div where I van previously declared back-ground color in a parent. It is not. working, It’s probably something simple, but I am stumped.

[codebyte]

[/codebyte]

The Tea Cozy

This will be blackspoce

    <div id="Banner">
      <p><h2>Our Mission</h2></p>
      <p><h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4></p>
    </div>

    <p id=placeholder2>This will be blackspoce</p>
  </div>
</main>
[codebyte]

[/codebyte]
/* Universal Styles */
body {
font-family: “Helvetica”, sans-serif;
font-size: 22px;
background-color: black;
color: seashell;
text-align: center;
opacity: 0.9;
padding: 3px;
padding-inline-end: 3px;

}

a {
text-decoration: underline;
color: seashell;

}

h2, h3, h4 {
margin: 0;
padding: 5px;
}

/* Mission Section */
Mission {
background-color: yellow;
height: 700px;
width: 1200px;
padding-top: 70px;
display: flex;
justify-content: center;
align-items: center;

}

Banner {
background-color: black;
width: 1200px;

}

You have “Banner { background-color: black; }.” You should try putting a period before “Banner.”

(I note that in your body ruleset, you have the background-color as black and the color as seashell; should that be the other way around?)

Thanks for your reply. Unfortunately, adding the period did not solve the problem.

The colors specified are correct, and I realize seashell would not work well with a yellow background. I will eventually have a background image in the .Mission section, but the syntax for background-change is less prone to errors than the syntax & path to import an image. I believe whatever is preventing me from changing the background color would also prevent me for adding an image.

I just realised that your Banner is the id to your div, so you should try “#Banner.”

Thanks again. I have tried bother “Mission” and “Banner” with and without the period and the hashtag. Neither of these combinations changed the appearance of the webpage.

I know there are complete index and style pages posted on this forum, but I learn more digging into one problem at a time. A solution sheet would not help me understand why my code doesn’t work.

In your HTML codebyte, the color is black and the background-color is seashell. What CSS rule is producing that effect? I don’t see it in your CSS codebyte.

They are showing the body section at the top of the CSS. Sheet, Thanks again

body {
font-family: “Helvetica”, sans-serif;
font-size: 22px;
background-color: black;
color: seashell;
text-align: center;
opacity: 0.9;
padding: 3px;
padding-inline-end: 3px;

}

This is no longer an issue. It was my first attempt at coding a website from scratch. After additional review of my notes and documentation, I realized there were numerous problems with both the CSS and HTML. I deleted the entire folder and will start again with the Tea Cozy project. Frustrating, but a good learning experience.

1 Like