top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How do CSS precedence/cascading rules work? How does the !important directive affect the rules?

0 votes
618 views
How do CSS precedence/cascading rules work? How does the !important directive affect the rules?
posted Nov 21, 2015 by Jayshree

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+1 vote
 
Best answer

CSS style rules “cascade” in the sense that they follow an order of precedence. Global style rules apply first to HTML elements, and local style rules override them. For example, a style defined in a style element in a webpage overrides a style defined in an external style sheet. Similarly, an inline style that is defined in an HTML element in the page overrides any styles that are defined for that same element elsewhere.

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; }
answer Nov 21, 2015 by Shivaranjini
...