CSS Debugging

Question 1

What is the first step when debugging a CSS issue?

A) Delete all styles and start over
B) Use the browser’s Developer Tools to inspect elements
C) Add !important to every rule
D) Switch to JavaScript debugging tools

Answer 1

B) Use the browser’s Developer Tools to inspect elements

Question 2

Which methods helps in identifying a missing or incorrect code?

A) Checking the browser console for errors
B) Refreshing the page repeatedly
C) Changing the font size in HTML
D) Disabling CSS completely

Answer 2

A) Checking the browser console for errors

Question 3

True or False:

The !important rule should always be used when CSS is not applying as expected.

Answer 3

False (It should only be used as a last resort to override styles.)

Question 4

True or False:

CSS rules are applied in a “first-come, first-served” order, meaning the first rule in a stylesheet always takes priority.

Answer 4

False (CSS follows the cascade and specificity rules.)

Question 5

True or False:

If an element does not appear as expected, using outline: 1px solid red; can help identify if it’s being rendered.

Answer 5

True.

Question 6

The browser’s built-in tool for inspecting and modifying CSS on the fly is called the __________.

Answer 6

Developer Tools (DevTools)

Question 7

If an element is not visible, you should check whether it has display: __________; applied to it.

Answer 7

none

Question 8

The best way to check if a CSS property is being overridden is to look at the __________ in DevTools.

Answer 8

computed styles

Question 9

The following CSS is meant to change the background of a <div>, but it d

div {
  background: blue;
  color: white;
}

div {
  background: red;
}

Answer 9

The second div rule overwrites the first one, changing the background to red. To fix this:

div {
  background: blue !important; /* Forces blue background */
  color: white;
}

or ensure the correct rule is applied.

Question 10

A <p> element is not visible. Given the CSS below, fix it:

p {
  visibility: hidden;
}

Answer 10

Change visibility: hidden; to visibility: visible; or remove the property.

Question 11

Why is the following div not moving down even though it has margin-top: 50px;?

.container {
  margin-top: 50px;
}
.container {
  position: absolute;
  top: 0;
}

Answer 11

The position: absolute; is overriding margin-top. Instead, use top: 50px; or remove absolute positioning.

Question 12

What is the first thing you should check using browser DevTools to ensure your CSS rules are being applied to the correct elements?

Answer 12

Inspect the element in question using DevTools (right-click and select “Inspect”). Then, check the “Rules” panel to see the CSS properties that are being applied to that element. This will tell you if your selector is matching the element and if your styles are being overridden.

Question 13

Explain the difference between “View Source” and the HTML tree in the DevTools element panel.

Answer 13

“View Source” shows the original HTML source code as it’s stored on the server. The HTML tree in the DevTools element panel shows the rendered DOM. The DOM reflects any modifications made by the browser (e.g., fixing errors in your HTML) or by JavaScript.

Question 14

.my-element {
  color: blue;
}

p {
  color: green;
}

<p class="my-element">This is some text.</p>

What color will the text be, and why? How can you use DevTools to confirm your answer?

Answer 14

The text will be blue. The class selector (.my-element) has higher specificity than the element selector (p). In DevTools, you can inspect the <p> element. The “Rules” panel will show that color: blue from the .my-element rule is applied, and the color: green from the p rule might be shown as overridden (crossed out).

Question 15

An element on your page is wider than you expect, even though you’ve set a specific width.
Which DevTools panel would you use to investigate the box model of the element?

Answer 15

You would use the “Layout” panel (in Firefox) or the “Box Model” section of the “Styles” panel (in Chrome) to investigate the box model.

Question 16

You want to quickly test a different font size for a heading on your page without modifying your CSS file.
How can you use DevTools to edit the font size of the heading and preview the changes in real-time? Also, how can you add a completely new CSS property to the heading using DevTools?

Answer 16

1. Inspect the heading element in DevTools.
2. In the “Rules” panel, find the font-size property (or add it if it doesn’t exist).
3. Click on the value of the font-size property, and then type in a new value. The heading’s font size will update in real-time on the page.
4. To add a new property, click on the closing curly brace } of the CSS rule. A new line will appear where you can type the name of the new property (DevTools offers autocompletion). Enter a value for the new property. Alternatively, you can click the “+” icon next to the selector to add a new rule.

Question 17

List the general steps you should follow when debugging a CSS problem.

Answer 17

1. Take a Step Back: If frustrated, take a break.
2. Validate Your Code: Check for HTML and CSS errors using validators.
3. Browser Support: Ensure the CSS property and value are supported by the browser. Check MDN browser compatibility tables.
4. Specificity: Identify if another CSS rule is overriding your styles using DevTools.
5. Reduced Test Case: Create a minimal code example that reproduces the issue.
6. Ask for Help: Share your reduced test case with colleagues or online forums.