Use dividers, bullets, and other images to organize your content.

Dividers

Dividers can separate parts of a page. Like this:

Here’s the code:

<p>Blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah.</p>
<p>Blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah.</p>
<p>
  <img src="divider3.gif" alt="Divider">
</p>
<p>Blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah.</p>
<p>Blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah.</p>

Figure 1. A divider

There are a bazillion free divider images on the Web. Try your friendly neighborhood search engine.

Bullets

Bullets help with lists. There are various ways to use them. Here’s one.

• Physics
• Algebra
• World history
• Technical writing

Here’s the code:

...
.check {
  list-style-image: url('bullet2.gif');
}
...
<ul class="check">
  <li>Physics</li>
  <li>Algebra</li>
  <li>World history</li>
  <li>Technical writing</li>
</ul>

Figure 2. Bullets

ul stands for “unnumbered list.”

Background images

You can highlight a message with a background image. For example:

Here’s the code:

...
.highlight {
  color:#800000;
  margin-left: 50px;
  border:1px solid black;
  padding: 2px;
  background-image:url('bg.jpg');
}
...
<p>Now wrap your package and mail it. You'll need to add the
right amount of postage. To be sure you have the right amount,
take your package to a canine post office.</p>
<p class="highlight">Remember to use heavy wrapping paper. Seal
it well, with lots of tape. Avoid wrapping with string, as
it may be caught in machines used to sort mail.</p>
<p>Contact the customer. If the customer is a human, use email,
so s/he doesn't know you're a dog. We must protect our
secret.</p>

Figure 3. A background image