saidshah Ahmadi

A Beginner’s Guide Debugging CSS 2023

For traditional programming languages, such as Java, C, and PHP, the techniques of debugging have evolved over the years

Your creative journey starts here.
  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Ulearna's App

Before debugging a CSS error, you need to spot it first. In some cases, you might receive a report from a colleague that there is a bug to be solved. Finding a CSS bug can be hard because there is no direct way to do it. Even for an experienced CSS developer, debugging and ^nding CSS issues can be hard and confusing.

1. What is debugging?

First of all, debugging doesn’t mean staring at your screen and wondering why your computer hates you. 

Debugging is a process that involves identifying existing or even potential errors in a program. A program is a set of “instructions” that tell the computer what it needs to do. 

For example, when you boot your computer and click on a browser like Google Chrome, it opens up. 

A programmer wrote instructions for the computer to follow every time someone clicks on the browser icon. 

Why is fixing errors in a program known as “debugging”?

A brief look at history

The term “bug” had been used before to describe mechanical malfunctions. The first person to use it to refer to computing problems was Admiral Grace Murray Hopper in the 1940s.

She worked in the navy, was a computer pioneer, and was working on the Mark II and Mark III computers. 

Murray Hopper first used the term when she and her team found a moth inside their computer that was inhibiting its functioning. So, the term has a very literal origin!

Types of errors

There are various types of errors that can result in your program not doing what’s expected or failing to run at all. Let’s learn about them below.

Syntax errors

Syntax refers to the “rules” that define a programming language. Syntax errors, therefore, result from “breaking” programming language “rules.”

Syntax errors include typos or missing a semicolon.

Logical errors

A logical error occurs when your program doesn’t work the way it should. The program is able to execute, though. 

Let’s look at an example. 

for (var i = 1; i <= 10; i++) {

    if (i % 2 == 0) {




In the above for loop, we’re trying to generate all the even numbers below 10. The above code runs, giving the following even numbers: 2, 4, 6, 8, and 10. 

However, there’s a problem with the results. Even numbers less than ten should include the number zero. Because we set our loop to begin at one instead of zero, we miss out on the first even number, zero.

Runtime errors

A runtime error occurs when you’re executing a program but execution stops. Sometimes, runtime errors can be caused by the environment in which you run your program. 

There are many other types of errors that you’ll learn as you keep learning code. Better still, learn how to “catch” them in your code via concepts like “errors and exception handling.”

Phew! That was a lot of new concepts! Now that we’ve answered the question “What is debugging?” let’s learn about the various types.

The History of Debugging CSS

Style Master

You might be surprised to hear that the first CSS debugging tool was released

in 1998 — 22 years ago! Its creators, John Allsopp and Maxine Sherrin, named

it Style Master. As they described it

Style Master is the leading cross-platform CSS development tool. Much more than just a text editor, Style Master supports your workflow — including: creating style sheets based on your HTML; live CSS editing of PHP, ASP.NET, Ruby and other dynamically generated sites; editing CSS via ftp; and much, much more.

The goal of Style Master was to make working with CSS more eacient, more productive, and more enjoyable. As you can see, then, debugging CSS has been a topic of interest to developers for a long time.

Firebug Browser Extension

In 2006, Joe Hewitt released the first version of the Firebug browser extension.

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website’s CSS, HTML, DOM, XHR, and JavaScript. — [Wikipedia](

The main features of Firebug were very similar to what we have in the developer tools (DevTools) of today’s browsers

  • inspecting HTML and CSS,
  • reviewing the JavaScript console,
  • testing web performance.

Without the effort of the folks who created these great tools, Style Master and Firebug, we might not have the DevTools we use today. We couldn’t be more thankful to them

What Has Changed Today?

]e scene today is dramatically di`erent. Every browser these days has builtin DevTools that make it easy for a developer to inspect and edit the HTML, CSS, and JavaScript of a web page. In this book, we’re interested in CSS.

Not to mention, when Style Master and Firebug were released so long ago, websites were very simple, and we had only one screen size to test on. Today, a website can be accessed by hundreds of smartwatches, mobile phones, tablets, laptops, and desktop computers. Debugging for all of these types of devices

is not an easy task. You could fix something for mobile and break it unintentionally for the desktop.

It’s not only about screen sizes. The size of web projects has gotten much bigger in the last 10 years. For example, the developers of a large-scale frontend project like Facebook or Twitter need a systematic way to test and debug. All of these changes to the work of web development are clear evidence that debugging must be taken care of from day one and that developers must learn it as a core skill.

2. Types of debugging

Debugging can be largely categorized into two types: reactive and proactive. Let’s dig deeper and learn a little more about them.

Reactive d