Home > DeveloperSection > Blogs > !important Rules in stylesheet

!important Rules in stylesheet


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1737  View(s)
Rate this:

!important Rules in stylesheet

In this blog I am trying to explain the concept of !important rules in stylesheet.

!important Rules:

Along with the need for the cascade in CSS came the need to override it. This is where !important rules come in. The !important syntax appears within a declaration, after the property value and before the semi-colon that terminates the declaration. Two components make up this syntax; an exclamation mark, used here as a delimiter, and the important keyword. A delimiter marks the ending of the thing and the beginning of another. Here the exclamation mark singles the end of the declaration. The important keyword must appear next, followed by a semicolon to terminate the declaration;

Example code: -

1.       Enter the following markup into your text editor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Mindstick Demo By Vijay Shukla</title>

    <style type="text/css">

        body

        {

            font: 14px sans-serif;

        }

        span#precedence

        {

            background: lightyellow;

        }

        span

        {

            background: orange !important;

        }

    </style>

</head>

<body>

    <p>

        !important rules are used to override specificity. The !important syntax causes

        a selector to have<span id="precedence"> greater oprecedence than those without it.

        </span>It also <span style="background: lightblue;">has greater precedence than the

            (X)HTML style attribute</span>

    </p>

</body>

</html>

2.       Save the preceding document.

3.       Run the demo.

Output: -

How it works:

In this demo you see how the !important rule overrides precedence. Because the following declaration contains the !important systax, it causes the background of all the <span> elements to be orange.

span

{

     background: orange !important;

}

     


Don't want to miss updates? Please click the below button!

Follow MindStick