I have applied background-color: #C0C0C0;
to my span element .grey_bg
but the background is not changing color. Why is that?
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
Because it's not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<div class="grey_bg">
<h1>Hey</h1>
</div>
... or make span block-level too:
span {display: block;}
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
First your markup is not correct. You can't have a block element, h3
, inside an inline element, span
.
But in case you want to keep that markup, you have to make the container element to behave as block
. So make it as:
.grey_bg {
width: 100%;
background-color: #C0C0C0;
display:block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With