I have been coding a website using html and css, and recently I've come to need a div element with a background color. I put in background-color: gray;
, but that didn't work. I used the inspect element feature of Google Chrome, and it says that Chrome doesn't recognize the element. I used the same feature in Firefox, and it fails to recognize the css element either. The div contains three floating sections, but it uses overflow: auto
, so that is not the problem. Can someone explain to me why I can't add background color to my divs?
html:
<div id="main">
<header>
<h1>LOGO</h1>
<nav>
<a href="index.html" title="Home">Home</a>
<a href="about.html" title="About">About</a>
<a href="features.html" title="Features">Features</a>
<a href="specs.html" title="Specifications">Specs</a>
<a href="updates.html" title="Updates">Updates</a>
<a href="contact.html" title="Contact Us">Contact</a>
</nav>
</header>
<section class="left">
<h2>NEWS</h2>
<p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum simaiorrum accaerf erfercim voloremod ut volectem con cus, temoluptatur as disquatent.</p>
</section>
<section class="right">
<h2>SOMETHING</h2>
<p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum simaiorrum accaerf erfercim voloremod ut volectem con cus, temoluptatur as disquatent.</p>
</section>
<section class="right">
<h2>SOMETHING</h2>
<p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum
simaiorrum accaerf erfercim voloremod ut volectem con cus,
temoluptatur as disquatent.</p>
</section>
</div>
css:
#main {
backgound: gray;
layer-background: gray;
overflow: auto;
border: 2px dashed black;
border-radius: 15px;
-moz-border-radius: 15px;
}
section {
background-color: green;
text-align: justify;
margin: 5px;
padding 10px;
border-radius: 10px;
-moz-border-radius: 10px;
}
Best Answer
In this part of your CSS:
backgound
should bebackground
, andlayer-background
is not a CSS property.With those mistakes fixed, what you have works.