Capital letters with CSS

Here is a drop cap with a pink background, red text, and a black border.

A good reminder is that everything in CSS is a box. The “H” letter is in a box so you can figure out that is not something difficult here. The code for the drop cap is simple but we can add more CSS properties to it. I put the drop cap in a span and made some adjustment:

• background-color:#FFCCFF; We added a background.
• color: #ff0000; I set the text color to red.
• border:1px solid #000000; We added a border around the drop cap.
• font-size: 80px; I set the font to 80 pixels to have a big drop cap.
• margin-right:6px; We added a margin to the right of the boxed drop cap.
• margin-top:5px; We explicitly set the top margin.

Try what I’ve done here or make your own drop caps.

<span style="margin-right:6px;margin-top:5px;
float:left;color:#FF0000;background-color:#FFCCFF;
border:1px solid #000000;font-size:80px;line-height:60px;
padding-top:2px;padding-right:5px;font-family:times;">H</span>ere
is a drop cap with a pink background, red text, and a black
border.<div style="clear:both;"><br></div>

Post a comment

Name (required)

Mail (will not be published) (required)

Website

Anti-spam text: (Required)*
To prove you're a person (not a spam script), type the security text shown in the picture. Click here to regenerate some new text.