Everything in CSS is a Box

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.

Khaki Drop Cap: 80 Pixels

This 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.

Copy and Paste this in your Blog or Web page.

It will look like this.

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

Firebrick Drop Cap: 80 Pixels

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 Strunk 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.

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