CSS order of precedence
The style that you ultimately see for an element is created dynamically by the mid tier and the browser, based on a hierarchy of multiple style sheets, plus any inline styles.
Styles are applied in downward order from the top of the diagram in the figure below. Inline styles always override other CSS rules, and application-specific styles override system styles. The standard style sheet usually contains rules for all elements with properties that work for all browsers. The other style sheets might repeat or add a rule with different or unique properties specific to a browser client, application, locale, or user.
Order of precedence for applying styles 
Properties that are not redeclared in succeeding style sheets are applied from the previous declarations.
Use case for input.text style rule
For example, suppose you have a style rule called*input.text* that is declared in the first four source files:
- System style sheet:
- System, browser-specific style sheet:
- Application, standard style sheet:
- Application, browser-specific style sheet:
The resulting rule is:
input.text {
background-color: red;
color: blue;
border: 2px solid green;
font-family: Arial, sans-serif;
font-size: 8px;
}
In this example, the style declarations from the application style sheets take precedence over those from the system style sheets. For instance, the color: blue declaration from the standard application style "wins" over the color: black declaration from the system style sheet.
The mid tier might assign multiple CSS rules to an HTML element; for example:
<textarea class="text sr f9 dat">
Style rules take precedence in right-to-left order. Rules to the right take precedence over rules to the left. Properties that are not declared are carried over and reapplied to succeeding style sheets.