The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon.
- In other words, it adds importance to all the sub-properties that the shorthand property represents.
- In normal use, a rule defined in an external style sheet which is overruled by a style defined in the head of the document, which in turn, is overruled by an inline style within the element itself (assuming equal specificity of the selectors).
- Defining a rule with the !important attribute that discards the normal concerns as regards the later rule overriding the earlier ones.
- So, it is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design.
Syntax:
element {
color: blue !important;
font-size: 14px !important;
...
}
Example 1:
<!DOCTYPE html> <html> <head> <title>Document</title> <style> h1 { color: blue ; } h1 { color:white !important; } body { background-color:green !important; text-align:center; background-color:yellow; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>!important property</h2> <p></p> </body> </html> |
Output:
In the above example, the background color of the body is green instead of yellow because “!important” is kept after the green background color inside the body tag.
Example 2:
<!DOCTYPE html> <html> <head> <title>!important property</title> <style> .geeks { color: green !important; size: 10ex !important; background-color: lightgray !important; } .geeks { color: red; size: 100ex; text-align:justify; background-color: purple; } h1, h2 { text-align:center; } h1 { color:green; } body { width:65%; margin-left:15%; } #gfg { color: lightgreen !important; size: 10ex !important; text-align:justify !important; background-color: darkgreen !important; } #gfg { color: orange; size: 1000ex; background-color: magenta; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>!important property</h2> <div class = geeks> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles and quizzes. </div> <div id = gfg> <p>Computer programming is the process of writing instructions that get executed by computers. The instructions, also known as code, are written in a programming language which the computer can understand and use to perform a task or solve a problem.</p> </div> </body> </html> |
Output:
Recommended Posts:
- Kotlin | apply vs with
- PHP | Ds\Vector apply() Function
- PHP | Ds\Deque apply() Function
- How to apply CSS property to an iframe ?
- PHP | Ds\Sequence apply() Function
- JavaScript | Function Apply
- Important Tips on How To Prepare for the GRE
- How to apply style to parent if it has child with CSS?
- How to apply two CSS classes to a single element ?
- JavaScript | Reflect.apply() Method
- JavaScript | handler.apply() Method
- How to apply border inside a table ?
- What is the difference between call and apply in JavaScript?
- Apply function to every row in a Pandas DataFrame
- How to define important text using HTML5 ?
- How to apply multiple transform property to an element using CSS ?
- Copy all the attributes of one element and apply them to another with JavaScript
- Difference between map, applymap and apply methods in Pandas
- Split-apply-combine strategy on DataFrames in Julia
- How to apply colored shadow and border properties to a grayscale image?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
