Title: Dropcap CSS help
Last modified: August 21, 2016

---

# Dropcap CSS help

 *  [CombatPost](https://wordpress.org/support/users/combatpost/)
 * (@combatpost)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/)
 * Hi,
 * I’m wanting to add a dropcap to every post on my site. I have it now so the first
   paragraph of every post is auto wrapped in
    `<p class="has-dropcap">Post here
   </p>`
 * I’m now struggling with how to code the CSS to reflect that in the article. Content
   is wrapped in ‘content-area’
 * Any help is appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [martcol](https://wordpress.org/support/users/hotmale/)
 * (@hotmale)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/#post-4267860)
 * Does this help?
 * [http://www.iandevlin.com/blog/2012/04/css/cross-browser-drop-caps-with-css](http://www.iandevlin.com/blog/2012/04/css/cross-browser-drop-caps-with-css)
 *  Thread Starter [CombatPost](https://wordpress.org/support/users/combatpost/)
 * (@combatpost)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/#post-4267862)
 * That does, but that is for every P, not just the content-area?
 *  [martcol](https://wordpress.org/support/users/hotmale/)
 * (@hotmale)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/#post-4267957)
 * That’s why you have your class in the p element.
 * You would use that for your selector:
 *     ```
       .has-dropcap:first-letter {
         font-size:350%;
         margin:11px 0 -5px 0;
         padding:0 .1em 0 0;
         height:.7em;
         line-height:.85em;
         float:left;
         color:#333;
         *line-height:1em; /* IE7 Only */
       }
       ```
   
 * I’m no expert at this but it’s worth a shot.
 *  Thread Starter [CombatPost](https://wordpress.org/support/users/combatpost/)
 * (@combatpost)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/#post-4267968)
 * Hi martcol,
 * I figured it out.
 *     ```
       #content-area p:first-letter {
         font-size:350%;
         margin:11px 0 -5px 0;
         padding:0 .1em 0 0;
         height:.7em;
         line-height:.85em;
         float:left;
         color:#333;
         *line-height:1em; /* IE7 Only */
       }
       ```
   
 * That works. Thanks for the link.
 *  [martcol](https://wordpress.org/support/users/hotmale/)
 * (@hotmale)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/#post-4267971)
 * If you use that selector then as I guess you worked out, any paragraph inside
   any div with an id of #content-area will apply that style. You may of course 
   be confident there is only ever going to be one paragraph in each div but to 
   be safe, you could make use of the class you added to the p.
 * I’m pleased you goy it going
 *  Thread Starter [CombatPost](https://wordpress.org/support/users/combatpost/)
 * (@combatpost)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/#post-4267985)
 * I used `first-child:first-letter` so it’s just the first letter of the first 
   paragraph not all paragraphs.
 * Code would be like this if anyone finds it useful.
 *     ```
       #your-content-wrapper p:first-child:first-letter {
       float:left;
       font-size:4em;
       color: #000099;
       margin-right:0.10em;
       line-height:90%;
       }
       ```
   

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Dropcap CSS help’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 2 participants
 * Last reply from: [CombatPost](https://wordpress.org/support/users/combatpost/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/dropcap-css-help/#post-4267985)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics