Within my CSS file, I have defined the following styles:
.myDiv{
float:left;
width:100px;
height:100px;
}
.yellow{
background:#faf8c7;
}
.lightGrey{
background:#f8f8f8;
}
In my HTML code:
<div class="myDiv lightGrey yellow"></div>
Despite specifying the yellow class last in the HTML, the div appears grey instead of yellow. However, if I switch the order of the .yellow and .lightGrey classes in the CSS (not the HTML), the div does appear yellow instead. Why is this happening?
One would assume that the order of class declarations in the HTML itself should dictate the appearance of the div, not the order in the CSS file. This seems counterintuitive.