What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

[TIPS] Force CSS through !important


New member
Sometimes you may encounter a need to implement one or two properties differently to a couple of sections on the web page. However, since these new sections contain most of the properties consistent with other sections (that have all the properties), copying the CSS with just a couple of changes can increase repetitiveness. Hence, we forcefully apply CSS with the keyword !important.

The following code writes five headings in H2, with the fourth one being different in color due to forceful CSS.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Position Absolute</title>
        h2 {
          color: #0d23e0;
        .special {
          color: #d90d2f !important;
    <h2> I am Heading #1 </h2>
    <h2> I am Heading #2 </h2>
    <h2> I am Heading #3 </h2>
    <h2 class = "special"> I am Heading #4 </h2>
    <h2> I am Heading #5 </h2>

fourth one being different in color

The fourth line is also rendered blue on the page if you remove the special code containing the !important keyword.

It is recommended not to use this property much in the CSS code you write. As a beginner, it might tempt you to quickly force a few properties when things are not going as you are expecting them. This approach can create issues later, and the code will become hard to debug.

Apply the “important” keyword only when indispensable, and you know the complete flow.