Pseudo-classes for <a> tags should always be specified in the following order:

  &:link, &:visited, &:hover, &:focus, &:active

The order can be memorized with the following phrase:

  Lord Vader Hates Furry Animals

A handy tool for viewing the extent of elements on a page is to add an outline to all the elements:

* {
  outline: 1px dashed #ddd !important;
}

Unlike a border, outline does not increase the element's size and so gives an accurate picture of its extent. The !important setting is added to attempt to overcome high specificity of some elements.

You can also target specific parts of a page by narrowing the scope of where the style applies:

.some-narrower-scope * {
  outline: 1px dashed #ddd !important;
}

A Debug switch is included near the bottom of the main menu.

To target an HTML element via its ID without increasing specificity (IDs have high specificity), use the ID attribute instead:

[id="element-id"] {
  color: red;
}