An often overlooked and under documented feature of CSS is the ability to nest multiple classes for a given element either augmenting or overriding styles. This can be useful if certain special effects are desired such as applying highlighting and bolding an input's text without having to specify all of the other attributes as well.
CSS:
.highlightAndBold{ background-color:yellow; font-weight:bold; } .textBoxes{ padding:4px;border:1px solid #d4d4d4; }
HTML:
<input class="textBoxes highlightAndBold" type="text" >
You can specify multiple classes for an element by simple putting a single space between each CSS style entry. In this case the element will have all of the styling specified by each of CSS tag as if all the attribute properties were specified together as one. In the case where CSS attributes conflict, the CSS tag that comes after the other in the style sheet will take priority.
CSS:
.blue{ background-color:blue; } .red{ background-color:red; }
HTML:
The elements background color will be overridden by the red CSS style since it comes later in the CSS style sheet. Changing the position of 'red' and 'blue' within the class specifier won't change the outcome.





