Posted By
Bajarangi soft ,
Posted On 09-10-2020
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;
...
}
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
h1 {
color: #e75b23;
}
h1 {
color:white !important;
}
body {
background-color: #f1ee33 !important;
text-align:center;
background-color: #ff00f2;
}
</style>
</head>
<body>
<h1>Bajarangi Soft</h1>
<h2>!important property</h2>
<p></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>!important property</title>
<style>
.geeks {
color: green !important;
size: 10ex !important;
background-color: #f19595 !important;
}
.geeks {
color: #ff0000;
size: 100ex;
text-align:justify;
background-color: purple;
}
h1, h2 {
text-align:center;
}
h1 {
color: #1c1b12;
}
body {
width:65%;
margin-left:15%;
}
#gfg {
color: #100f0f !important;
size: 10ex !important;
text-align:justify !important;
background-color: #a9e7e5 !important;
}
#gfg {
color: #1d180f;
size: 1000ex;
background-color: magenta;
}
</style>
</head>
<body>
<h1>BAJARANGI SOFT</h1>
<h2>!important property</h2>
<div class = geeks> A Computer Science portal for Bajarangi.
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>