Most of the time, the reason behind this frustrating issue is the Specificity Algorithm of CSS, where a more specific selector containing the same styles will take precedence and overrule what you are attempting to apply.

A Simple Example

Suppose you are working with the following HTML and CSS:

<button class="button"> Learn CSS Specificity </button>

.button {
    background-color: red;
}

button {
    background-color: blue;
}

There are two competing styles applied to the same element. One with a background-color: red; and another one with background-color: blue;. The question is which one of them gets applied?

At first glance, you might assume that the button's background will be blue maybe because you thought that since CSS applies styles in a top-down approach and as background-color: blue; appears later, it will override the previous one background-color: red;.

Well, let’s see how it looks in the browser.

Ah, the actual result is red.

Why is this happening?

This behaviour may seem confusing at first, but it all comes down to CSS specificity. In this blog, we will be demystifying why this strange behaviour occurs by breaking down how the Specificity Algorithm of CSS works and why certain styles take precedence over others.

What is specificity?

According to MDN, Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element.

In the above example, since the class selector has more weight than the tag selector due to specificity, the property declared in the class selector got higher preference by the browser.

Now, if I comment out the styles applied using the class selector, you will see that the styles in the tag selector will be applied.

So whenever there will be clashing styles in one element, always the styles of the selector with a higher specificity score will be applied to that element.

How Specificity score is calculated?

The specificity score value is a four-column value of four different selector weights. It’s written like INLINE-ID-CLASS-TYPE, each representing four different types of CSS Selectors, with the default scores of 0-0-0-0. As you add more selector components of a specific category, the score of that column increases by 1 each time.

Once the specificity scores have been calculated, they are compared column by column from left to right and the selector with a greater value in the first differing column take precedence!

Let’s understand this using some examples.

Suppose the HTML file looks like this:

<div>
    <button class="button" id="btn"> Learn CSS Specificity </button>
</div>

1. TYPE Column

   Whenever you add an element selector like h1, div, p, etc or pseudo-elements like ::before, ::after, ::placeholder, etc, the score of the TYPE column increases by one (0-0-0-1).

    button {                    /* 0-0-0-1 */
        background-color: blue;
    }
   
    div button {                /* 0-0-0-2 (WINS!) */
        background-color: yellow;
    }
   

2. CLASS Column

   Whenever you add a class selector like .btn or attribute selectors like [type="email"] or pseudo-classes like :hover, :active, the score of the CLASS column increases by one (0-0-1-0).

    button.btn {                    /* 0-0-1-1 */
        background-color: blue;
    }
   
    button.btn:hover {                /* 0-0-2-1 (WINS!) */
        background-color: yellow;
    }
   

   Do you notice something here? Before understanding specificity, I used to think pseudo-classes like :hover had some built-in priority that automatically overrode styles. But now, it's clear that when :hover is applied, the browser dynamically applies the :hover pseudo-class when the user hovers over the element and its specificity score increases, allowing it to override previous styles.

3. ID Column

   Whenever you add an ID selector like #submitBtn, the score of the ID column increases by one (0-1-0-0).

    #container button.btn {                    /* 0-1-1-1 */
        background-color: blue;
    }
   
    #container button.btn#submitBtn {                /* 0-2-1-1 (WINS!) */
        background-color: yellow;
    }
   

4. INLINE Column

   Whenever you add some inline style like style=”background-color: black”, the score the of Inline column increases by one (1-0-0-0) and overrides all the styles which was applied in the stylesheet.

    <div>
        <button class="button" id="btn" style="background-color: black;"> Learn CSS Specificity </button>
    </div>
   

Selectors with matching specificity

In all the above cases, we have discussed how the specificity algorithm works for different specificity score, but what if there are two or more selectors with the same specificity score. For these cases, it follows the basic cascade order rule of CSS, where the styles declared later will override earlier ones if their specificity is equal.

This rule applies not only within the same stylesheet, but also across multiple stylesheets. If two stylesheets define rules with the same specificity, the styles from the stylesheet loaded later in the HTML <head> will take precedence. This is because browsers process stylesheets in the order they are linked.

The !important keyword

By now, we are quite familiar with the Specificity Algorithm of CSS and how it works. But one can bypass this Specificity system and force a style to take precedence over all other selectors—including more specific selectors and even inline styles, by using a special keyword !important beside a style declaration.

Since this keyword comes with so much power, as it alters the default Specificity Algorithm of CSS, and with great power there comes great responsibility and hence it should be used very carefully and sparingly, as it can make debugging difficult. Whenever you are using the !important keyword, make sure to add comment in that line explaining why it is necessary to ensure maintainability and clarity.

Challenge

What will be the background-color of the <button> when hovered over?

<div class="container">
  <button id="btn" class="btn" style="color:white; background-color:black">Button</button>
</div>

.container #btn {
  background-color: blue;
}

.container .btn:hover {
  background-color: red;
}

Summary

I hope you now have a clear understanding of the CSS Specificity Algorithm. Learning this will definitely help you debug styles that do not apply as intended and will also enable you to write more maintainable and robust styles.

If you’re thinking it’s all thanks to the internet, you’re absolutely right! But how does the information actually travel between the two computers? If no then don’t worry we will be discussing this in this blog.

A Brief History of the Internet

Before we get into the nitty-gritty of how data travels, let’s take a moment to appreciate the history of the internet — the backbone of modern communication and gaming.

The internet as we know it began in the late 1960s with ARPANET, a project funded by the U.S. Department of Defense. ARPANET’s primary goal was to enable computers at different universities and research institutions to communicate with each other. In 1983, the adoption of the TCP/IP protocol laid the foundation for today’s internet, standardizing how data is sent and received. Over the years, advancements in technology and infrastructure transformed the internet into a global network connecting billions of devices, revolutionizing the way we share information, work, and play.

Why the Internet Matters

The internet has become an integral part of our lives, enabling us to:

• Share data across the globe in seconds.

• Access a vast wealth of knowledge and resources.

• Stay entertained through gaming, streaming, and social media platforms.

• Connect with people, no matter where they are.

It’s no exaggeration to say that the internet powers much of our modern world, including the online multiplayer games we love.

From Browsers to Servers: The Journey of Your Data

Now comes the most exciting part: how the information about Ranjit’s headshot reaches Rahul’s computer.

Step 1: Breaking Down the Information

When Ranjit clicks his mouse to shoot, his computer breaks down this action into smaller chunks of data called packets. Each packet contains part of the information needed to process the shot, such as the coordinates of the bullet and the outcome (a headshot).

Step 2: The First Hops

The packets first travel from Ranjit’s computer to his router via a LAN cable or Wi-Fi. From the router, they move to the modem and leave Ranjit’s home network (known as a Local Area Network or LAN) to enter the wider internet (Wide Area Network or WAN).

Step 3: Traveling Through the Internet

Once on the internet, the packets take the most efficient route to reach the Valorant server. Along the way, they pass through multiple routers managed by Ranjit’s Internet Service Provider (ISP). A critical part of this journey involves the DNS lookup process, where the domain name (e.g., valorant.com) is translated into an IP address, helping the packets find the correct destination.

Step 4: Reaching the Valorant Server

When the packets reach the Valorant server, the server processes the information and confirms the headshot. At this point, only Ranjit’s computer and the server know what happened. But for Rahul to experience the event, the server must relay this information to his computer.

Step 5: The Reverse Journey

The server sends the data about Ranjit’s shot (and Rahul’s unfortunate demise) back through the internet, following the same process in reverse. The packets travel through Rahul’s ISP and routers before finally reaching his computer.

Step 6: Reassembly and Display

Once the packets arrive at Rahul’s computer, they are reassembled into a complete message. The game processes the data, and Rahul’s screen displays the result: his character is dead, and Ranjit’s headshot is confirmed.

The Role of Efficiency and Latency

In fast-paced games like Valorant, latency (the time it takes for data to travel between computers) is critical. Game developers optimize servers and networks to ensure minimal lag so that actions feel instantaneous. Efficient packet routing and high-speed connections are key to delivering smooth gameplay.

Conclusion

From Ranjit’s mouse click to Rahul’s reaction, the internet orchestrates a complex yet seamless process that makes multiplayer gaming possible. Understanding the journey of data not only deepens our appreciation for the technology but also highlights the marvel of human innovation that allows us to connect and compete with friends across the globe.

Next time you play an online game, take a moment to think about the intricate systems working tirelessly in the background to make your experience enjoyable. The internet truly is a game-changer!