Why the color property isn't changing? - html

Question

The media query is changing everything but not the colour property. I wonder why? It is only working if I don't define the color property and leave it to default. Why media query can't change the color?
https://jsfiddle.net/6spv3mrf/
<style>
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
</style>

Answer 1

You need to move #media css after your h1 css. Right now you are basically overwriting your #media properties with your normal css. If you add for example body inside your #media properties then your general body css should also be defined before the #media properties.
You can find more information in the official documentation:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all #media rules containing the declaration and on all links on the path through which the style sheet was reached.
You can find full documentation on the link.
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}

Answer 2

move the media query to the end of the css
more info on why it works
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}

Answer 3

As we already wrote in the comments: The media query has to follow AFTER the general rule, since otherwise it is overwritten by the properties in the general rule (which apply to everything, so it's a matter of order):
Here's the (edited) code from your fiddle, which, BTW, you can as well put into a snippet here on SO:
body {
background-color: yellowgreen;
font-family: sans-serif;
}
#box {
width: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 1;
}
#text {
min-height: 80%;
margin: 25% 10%;
padding: 10px;
}
h1 {
font-weight: bold;
font-size: 2em;
margin: 0;
color: #000;
text-align: left;
}
#media only screen and (max-width: 900px) {
h1 {
color: red;
/*doesn't work*/
background-color: yellow;
/*works*/
}
}
<div id="box">
<div id="text">
<h1>
Random<br> Text
</h1>
</div>
</div>