Hall of Bright Carvings

A debug stylesheet I threw together to try and give a few basic rules for helping to debug css issues.

@charset "utf-8";

@media all {
/**
*  DEBUG RULES: For easy debugging. Just stick id="debug" in the  tag
*  and then the debugging classes you want to turn on. Options are:
*  class="colours"     [Makes each div a seperate vibrant colour]
*  class="names"       [Prints the ids at the begining of each div with black font on a white
*                      background as well as displays the class name of every element on the page
*                      on a blackground with white font]
*  class="border"      [Turns on coloured borders depending the hierachy of each element on the page]
*  class="margin-off"  [Turns off all margins]
*  class="padding-off" [Turns off all padding]
*  Combinations of these classes can also be used (ie: body id="debug" class="border names padding-off")
*/
#debug.colours #container {
    background: grey;
}
#debug.colours #header {
    background: green;
}
#debug.colours #main {
    background: yellow;
}
#debug.colours #sideNav {
    background: blue;
}
#debug.colours #content {
    background: purple;
}
#debug.colours #sideBar {
    background: pink;
}
#debug.colours #footer {
    background: orange;
}
#debug.names div::before {
    content: attr(id);
    background-color: white;
    color: black;
}
#debug.names * [class]::before {
    content: attr(class);
    background-color: black;
    color: white;
}
#debug.border * { outline: 2px dotted red }
#debug.border * * { outline: 2px dotted green }
#debug.border * * * { outline: 2px dotted orange }
#debug.border * * * * { outline: 2px dotted blue }
#debug.border * * * * * { outline: 1px solid red }
#debug.border * * * * * * { outline: 1px solid green }
#debug.border * * * * * * * { outline: 1px solid orange }
#debug.border * * * * * * * * { outline: 1px solid blue }

#debug.margin-off * {
    margin: 0;
}
#debug.padding-off * {
    padding: 0;
}
/**
*  End Debug rules.
*/
} /* @media rule; end of */