CSS Interview Question: Describe the difference between specificity and inheritance in CSS

CSS Interview Question: Describe the difference between specificity and inheritance in CSS


Specificity in CSS is like a game of "who's got more power?" Imagine you and your friends are playing a game where you decide who gets to choose the game you all play next.

You all give reasons why you should choose, and the one with the strongest reason wins.

In CSS, specificity is about deciding which style rules win when there's a conflict.

For example, if you have two rules that could apply to the same element but they contradict each other, specificity determines which one takes precedence.

Here's a quick example:

Rule 1: You tell all paragraphs (p) to have the color red.

Rule 2: But then you say that the paragraph with the class .blue-text should be blue.

If a paragraph has the class .blue-text, specificity decides which rule to follow. The rule targeting .blue-text has higher specificity because it's more specific than just targeting all paragraphs. So, the paragraph turns blue.


Inheritance is like family traits passed down through generations. Just as you might inherit your hair color or height from your parents, CSS properties can be inherited from parent elements to child elements. This means you can set some styles on a parent element, and certain styles will automatically apply to the child elements inside it.

For example, if you set the font family on the body of your webpage, all the text inside the body will use that font family, unless you specify otherwise for specific elements.

Here's a simple example:

  • You tell the body of your webpage to use the font "Arial".
  • All text inside the body will use "Arial", unless you tell a specific text element to use a different font.

Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates