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)

  • Does this help?

    https://www.iandevlin.com/blog/2012/04/css/cross-browser-drop-caps-with-css

    Thread Starter CombatPost

    (@combatpost)

    That does, but that is for every P, not just the content-area?

    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

    (@combatpost)

    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.

    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

    (@combatpost)

    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.