Neal Grosskopf Dot Com A NG Designs Site

Recent Articles:

• Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
• Tracking Internal Website Campaigns With Google Analytics and PHP
• Everything You Need to Know About jQuery's .data() Method
• Google vs. China: How It Will Affect Web Workers
• Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

Subscribe To Feed

Subscribers

Mar 25

Drop capitals are commonly seen in newspapers or books. They can be identified by looking at the first letter of a paragraph or a page that is usually larger than the rest of the paragraph, bolded and often times a different font-family.

I've seen many different methods to achieve this effect in HTML and CSS, most of the time the method requires unnecessary elements or classes. I'll give an example of how to do drop caps in CSS without any classes, and then I'll show you a second method which will require you to place a single class on the parent element.

Styling Our Drop Cap in CSS Without Classes

The first option is if you want to style the first P element on every page of your website with a drop cap. The selector below will first use the :first-child pseudo selector to find our first P element and then it will select the first letter of the P element with the first-letter pseudo selector.

I've added some other visual effects to our drop cap such as a background-color, font-family, text-transform, and a double'd border which is seldom used.

View Demo >>

Using A Class

You may also want to selectively apply a drop cap to other blocks of text on your website. In this case, simply add a class to the paragraph and add this selector to your CSS: