When working with CSS, you may often need to override existing styles to ensure that specific elements are displayed correctly. CSS provides multiple ways to override styles, whether you’re working with external stylesheets, inline styles, or inherited properties.

In this blog, we’ll cover:
✅ How CSS specificity works
✅ Using !important to force styles
✅ How to override inline styles
✅ The role of CSS inheritance and cascading
✅ Best practices for overriding CSS

1. Understanding CSS Specificity

CSS rules are applied based on specificity. The more specific a rule is, the higher priority it has.

Specificity Levels (From Lowest to Highest Priority)

CSS Selector Type	Example	Specificity Score
Universal Selector	* {}	0,0,0,0
Element Selector	p {}	0,0,0,1
Class, Pseudo-class	.button {}, :hover	0,0,1,0
ID Selector	#header {}	0,1,0,0
Inline Styles	style="color: red;"	1,0,0,0
!important	color: blue !important;	Overrides everything

Example: Overriding a Class Selector

/* Default button style */
.button {
    background-color: blue;
    color: white;
}

/* More specific style (higher specificity) */
button.button {
    background-color: red;
}

✅ Why does button.button override .button?

• It’s more specific because it includes the button element itself.

---

2. Using !important to Force a Style

The !important rule forces a CSS rule to override all others, even inline styles.

Example: Using !important

.button {
    background-color: blue !important;
}

<button class="button" style="background-color: red;">Click Me</button>

✅ Why does this work?

• Even though the inline style sets background-color: red;, the !important rule takes higher priority.

🔴 Warning: Overusing !important can make your styles difficult to manage and debug.

---

3. How to Override Inline Styles

Inline styles (style="...") have high specificity, but you can override them using !important or more specific CSS selectors.

Example: Overriding Inline Styles

.button {
    background-color: green !important;
}

<button class="button" style="background-color: red;">Click Me</button>

✅ Why does this work?

• The !important rule overrides the inline style="background-color: red;".

---

4. Overriding Styles with More Specific Selectors

If a rule isn’t applying, try making your selector more specific.

Example: Increasing Specificity

/* Less specific (gets overridden) */
.button {
    background-color: blue;
}

/* More specific */
div .button {
    background-color: red;
}

<div>
    <button class="button">Click Me</button>
</div>

✅ Why does this work?

• div .button is more specific than .button.

---

5. Overriding Styles in Different Stylesheets

If you have multiple CSS files, the order in which they are loaded matters.

Example: Overriding External Stylesheets

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="override.css">

✅ Why does this work?

• The override.css file is loaded last, so its styles take precedence.

---

6. Overriding Inherited Styles

Some properties, like color and font-family, inherit values from parent elements. You can override them using:

• inherit: Forces an element to take its parent’s value.
• initial: Resets a property to its browser default.
• unset: Removes inheritance (acts like initial or inherit).

Example: Overriding Inherited Styles

body {
    color: blue;
}

/* Override inherited color */
h1 {
    color: red;
}

p {
    color: initial; /* Resets to browser default */
}

✅ Why does this work?

• color: red; overrides body { color: blue; }.
• color: initial; resets the paragraph color to its default.

---

7. Overriding Styles in Media Queries

Media queries help override styles based on screen size.

Example: Overriding Styles in Mobile View

.button {
    background-color: blue;
}

/* Override styles for screens smaller than 600px */
@media (max-width: 600px) {
    .button {
        background-color: red;
    }
}

✅ Why does this work?

• The @media query applies styles only when the screen width is less than 600px.

---

8. Best Practices for Overriding CSS

✅ Use more specific selectors instead of !important.
✅ Load stylesheets in the correct order (custom styles after default styles).
✅ Use media queries to override styles for different screen sizes.
✅ Avoid inline styles whenever possible for better maintainability.
✅ Check browser developer tools (F12 or Inspect Element) to debug styles.

---

Conclusion

Overriding CSS styles is a common task, and understanding specificity, inheritance, and cascading rules helps ensure your styles apply correctly.

By using more specific selectors, loading stylesheets in order, and using !important only when necessary, you can effectively override styles in CSS.