3. Debugging Techniques in CSS


          CSS is like any of the programming languages that you have previously encountered. You will encounter errors in your code along the way. But unlike in your G8 C++ or Java (for some campuses) where the program stops running when a problem is encountered, in CSS, the page will still render even with errors, but it will not show in the way that you would have wanted. And unlike in C++ or Java (for some campuses) where the line of the error can be traced, CSS will not give you a clue as to where the error is.

          Debugging in CSS is a skill that you will acquire along with experience but listed below are some pointers on where you can start to debug.

  • Make sure the proper selector, property, and value where appropriate.
    • Some beginners tend to confuse the different CSS properties and use them on selectors where the property is not applicable. One common example is using the text-align property on a div element to center the whole div container. Text-align only works on text, not whole HTML containers.
    • Another common mistake is using the wrong values on properties. One common example is setting the value of float to “center.” Note that “center” is not a possible value for float.
  • Learn the box model
    • The most common frustration in using CSS is the elements never seem to quite align, no matter how many margin pixels you are adding. One example is when you have two div tags that you have set to have the same width, but the other seems larger. The reason for the difference in size is that the other div tag has a padding value. The padding value is not calculated into the actual width property unless you add other CSS properties to calculate the padding into the final width (i.e., box-sizing, flex-box). Understanding the box model can help you a great deal.
  • Use the inspect element feature in browsers
    • When you are viewing a website, you can right-click anywhere on the webpage and select “Inspect” (for Chrome) or “Inspect Element” for Mozilla. When you hover over a section of the HTML code, the corresponding part of the webpage is highlighted.
Figure 1. Inspect Element of Mozilla Firefox


  • Make use of available plugins and developer tools.
    • When you already have a good grasp of CSS concepts, you can take the next step and use more advanced equipment for coding in CSS. There are several plugins that you can use to help ease your debugging.
    • Check out the developer tools that Mozilla is offering in this link: Debugging CSS. (https:// developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS)