Information Technology Systems & Services
CSS as a Diagnostic Tool (Debugging CSS)
Borders Technique
A problem you can have in CSS is visualizing why something is happening. Is that extra space a margin, or some padding? Is it the margin of the parent element, or the child? Is it even caused by either of the two elements, or something else? By applying an arbitrary brightly colored and thick border to each element, parent and child(ren), the boxes reveal their constraints and spacing more apparently. Background colors can help in this same way.
Check Selectors
Use the border technique or background colors to highlight the element you "think" that you are selecting can save a lot of head banging. The cascade and inheritance can be tricky and selectors may not actually be applied your intended target. When in doubt; make the element obvious with borders or background styles. If the change doesn't take effect, then the selector could be the culprit.
Comment Out
Comment out rules and then add them back one attribute at
a time until you spot the one causing the problem. The idea
is to reduce and isolate the problem. It is using the process
of elimination to make sure that the element you are working
with is actually the culprit. Try hiding surrounding
elements, and leaving parent elements (all the way up the
chain, as far as the body itself if necessary)
as unstyled as possible. Comment them out, don't delete them,
so you can put them back later.
User Stylesheets
Eric A. Meyer, wrote an article " Using CSS as a Diagnostic Tool" for O'Reilly in 2000. This technique enables developers to use their own special style sheet to help them design and debug their pages by exposing aspects of the page structure.
For those not familiar with User Stylesheets, here is a summary: A Web page is rendered according to a style sheet (sometimes several) written by the page author. It's also possible for the user to create a style sheet and to declare it to the browser. Where CSS rules conflict, it's possible to declare that the user's rule should prevail over the author's. So...the user style sheet can contain rules, which expose aspects of the structure and design of any page viewed, for the purpose of testing and diagnosis of both HTML and CSS. You can diagnose any page. A diagnostic style sheet can become as critical a part of a developer's toolkit as the W3C HTML and CSS validators.