Prioritizing Style In CSS

Hello, this article shows some of the different ways to override and prioritize styles in CSS.

When a class or ID in a style is previously declared and you want to use a specific one, it is necessary to emphasize the use of a property as it helps to manage overwriting arrangements and organization of CSS code.

1. Use class element to override body element

The Output:

Ignoring the text color and background color specified in the body element, the class will override the body elements.

2. Override Styles in Subsequent CSS

In a case where there are two or more classes in the CSS style and the two classes are declared , the subsequent class style is what will be applied as the class declaration in the style section.

The Output

Note that how the classes are listed in line 15 above doesn’t matter, what matters is the order the classes have taken in the style element.

3. Override Class with ID

Regardless of the class or id order, the id will always override the class.

The Output:

4. Override class with inline style

The Output:

As seen in line 19, despite the two classes and the id. The style that is produced in the output is the inline style where the style is placed in the h1 tag.

5. Override all styles with ‘!important’

When you add !important to the properties within a class or id, it overrides all styles.

Take note of lines 7 and 8. !important can be added to ids too and they will yield the same result as when added to classes.

The Output:


In this article, we learned the various ways of prioritizing styles in CSS and I hope you found this article helpful. I’ll appreciate your comments and claps and I’m available to answer your questions on Twitter, Gmail:

If you know other ways of prioritizing styles in CSS, please comment below for others to see and learn from. Thanks.

The code used in this article can be accessed here.