DROP CAPS First letter of paragraph is shown bigger

Posted By : Deepak Insa | 29-Jun-2015

css

It is about the paragraph which have first letter bigger. like:-

Cross browser Way

Wrap the first letter in span and give it style accordingly like:-

HTML

<p><span class="firstLetter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.</p>

CSS

.firstLetter{ 
  float: left; 
  color: #903; 
  font-size: 75px; 
  line-height: 60px; 
  padding-top: 4px; 
  padding-right: 8px; 
  padding-left: 3px; 
  font-family: Georgia; 
}

CSS3 Way

Just target the first letter of first paragraph by using pseudo class selector. But It not support IE below 9.

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

CSS

p:first-child:first-letter { 
  float: left; 
  color: #903; 
  font-size: 75px; 
  line-height: 60px; 
  padding-top: 4px; 
  padding-right: 8px; 
  padding-left: 3px; 
  font-family: Georgia; 
}