<!DOCTYPE html>
<style>
.block {
font-family: Ahem;
font-size: 20px;
width: 200px;
height: 100px;
display: inline-block;
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
</style>
<div>
<div class="block" style="color: #a00;">
Red on white
</div>
<div class="block" style="color: #0a0;">
Green on white
</div>
<div class="block" style="color: #00a;">
Blue on white
</div>
</div>
<div>
<div class="block" style="color: #f99; background-color: #000;">
Red on black
</div>
<div class="block" style="color: #9f9; background-color: #000;">
Green on black
</div>
<div class="block" style="color: #99f; background-color: #000;">
Blue on black
</div>
</div>
<div>
<div class="block" style="color: #000; background-color: #fdd;">
Black on red
</div>
<div class="block" style="color: #000; background-color: #dfd;">
Black on green
</div>
<div class="block" style="color: #000; background-color: #ddf;">
Black on blue
</div>
</div>
<div>
<div class="block" style="color: #fff; background-color: #600;">
White on red
</div>
<div class="block" style="color: #fff; background-color: #060;">
White on green
</div>
<div class="block" style="color: #fff; background-color: #006;">
White on blue
</div>
</div>