Drop Caps in Paragraph Text

Be sure to target the element you’re looking to add a drop-cap to.  Usually the first child of another element.  This example targets the first letter of the first paragraph.

p:first-child:first-letter { 
    float: left; 
    color: #000; 
    font-size: 71px; 
    line-height: 75px; 
    padding-top: 0px; 
    padding-right: 10px; 
    padding-left: 0px; 
}

 

Dave Winter focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at dauid.us (and his students think he's pretty boss).
© 2008-2020, dauid.us