CodePen

HTML

            
              <div id='someDiv'>
    <p>Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.</p>
</div>
            
          
!

CSS

            
              .firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var firstParagraph = $('.someDiv p:first-child').text();
var firstChar = firstParagraph.substr(0,1);
firstChar = '<span class="firstcharacter">' + firstChar + '</span>';
$('.someDiv p:first-child').html(firstParagraph.replace(/^./, firstChar));
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................