I’m Seeing Red: How the color red is being useful in CSS

So, you want to visualize how large your background is with margins and paddings?

Utilize the color “red”. It’s easy to type in the keyboard and it appears instantly like a bright red fruit in the midst of the forest.

For example:
[code lang=”html” title=”HTML”]
<div class="favorite-things">
<ul>
<li>Mobile phone</li>
<li>Television</li>
<li>Couch</li>
</ul>
</div>
[/code]

[code lang=”css” title=”CSS”]
.favorite-things li {
margin:1em 0;
padding:1em;
border-bottom:1px solid #ccc;
}
[/code]

Let’s say you want to see how a background-color upon hover would affect an <li> element, you could do this in Firebug or any DOM inspection tool:

[code lang=”css” title=”CSS”]
.favorite-things li {
background-color:red;
}
[/code]

The element would show if you’ve got the correct spacing in your paddings and margins.