Everything in CSS is a Box

<!-- the drop cap --> Daisy likes the way the drop cap makes its own little box, which is a good reminder that everything in CSS is a box. And because it is a box we can take our crayons out and color the background and outline the box. The letter "D" for Daisy is in a box, the paragraph is a box, and every piece of text here is in a box.

The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look. We put our drop cap in a span

We made a few adjustments to the drop cap.

1. background:khaki; We added a background.
2. border:1px solid darkkhaki; We added a border around the drop cap.
3. margin-right:5px; We added a margin to the right of the boxed drop cap.
4. margin-top:5px; We explicitly set the top margin.
5.  

Khaki Drop Cap: 80 Pixels

<!-- the drop cap -->

T

his is a drop cap with a khaki background, white text, and a darkkhaki border. We used named colors so that we can make changes to the code easy. It might look better with a colored border. And we would likely want to change the color of the drop cap. We used the named color white.

<!-- the drop cap -->
<span style="margin-right:6px;margin-top: 5px;float:left;color:white;background:kh aki;border:1px solid darkkhaki;font-size:80px;line-height:60p x;padding-top:2px;padding-right:5px;font -family:times;">T</span>hi s is a drop cap with a black background, white text, and a black border.<div style="clear:both;"><br& gt;</div>
 

It will look like this.

<!-- the drop cap -->

This is a drop cap with a black background, white text, and a black border.

Firebrick Drop Cap: 80 Pixels

<!-- the drop cap --> Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Stru nk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.

Copy and Paste this in your Blog or Web page.

It will look like this.

<!-- the drop cap --> <!-- the drop cap -->

Mike Golby might like the background color firebrick better than gold.