Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on. What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first. For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:
- p { color: #ff0000; }
- p { color: #000000; }
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:
- p { color: #ff0000 !important; }
- p { color: #000000; }
NOTE: Do not use too many !important rules in your CSS this will cause unexpected issues in yuor HTML output. For instance If you had applied !important rule in
tag with color red and than you are assigning some container's
color green with !important rule applying in it and in the end of CSS again you are applying CSS rule to P tag with color black. What do you expect from browsers for exact output? OR How User agents will able to know what do you wanted to do?
No comments:
Post a Comment