CSS pseudo Drop Caps
Drop caps has been used for a long time for printing media. Now, drop caps arrive to the web. using :first-letter pseudo made easy. No need extra markup, it mean you no need to attach a class name to first letter manually. Sadly not supported on IE < 9, and work in most modern browser including IE9 or above. IE is dead, i dislike IE for a long time. Our target is to style paragraph first letter without extra markup or class name and use CSS only. Try this p:first-letter { font-size: 400%; color: #903; float: left; font-family: 'Times'; line-height: 1; padding: 0 10px; } Code above simply tell you how to make a drop caps. Note: Keep in mind, :first-line pseudo selector is not supported on IE8 or lower. Probably, you need a fallback with extra markup. and the cross browser way.. <p> <span class='dropcap'>L</span>orem ipsum... </p> Now style the element with dropcap class name. Now, you can use dropcap on all modern browser in