Drop Caps

I think that drop caps, while very old school, are elegant, very cool, and add a bit of interest to an otherwise boring page of text. This is a rather simple effect to create using a bit of HTML code that is wrapped around the first character typed on this page. In order to demonstrate the full effect of drop caps to those who might not know what a "drop cap" is, I need to compose an entire paragraph that spans below the bottom of my first character. There, I think I have done it!

 

Anatomy of the Code Snippet

_div style=_background-color_ #ebedee; padding_ 20px 20px 20px 20px; overflow_ hidden;__Your Text Here__div_ (3).png  

 

Steps to Add a Drop Cap

1. Copy the code snippet:

<p><span style="float: left; width: 0.7em; font-size: 400%; font-family: algerian, courier; line-height: 80%;">A</span>dd your text here.</p>

 

2. Open a content page in Canvas and click "Edit." Open the HTML editor.

3. Paste the code in the box. Switch back to the Rich Content Editor (RCE) to preview.

4. Highlight the drop cap "I" and change it to the letter you want. Highlight the rest of the text and replace it with your own.

This last step can also be done in the HTML editor by replacing the "A" with your drop cap letter and replacing the "dd your text here." with the rest of your sentence, minus the first letter.

 

Tip: If you are not happy with the amount of white space beneath your drop cap, try increasing the size from 400% to 500% in the HTML.