Drop Caps

Styling the first letter of a paragraph with CSS 2.1 and CSS 3

by allusis

HTML

<div>
  <h1>First Letter with CSS3 and CSS 2.1</h1>
</div>
<div>
  <h2>The CSS3 way</h2>
  <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>
</div>
<br />
<div>
  <h2>The Cross-browser way</h2>
  <span class="firstcharacter">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.
</div>

CSS

body {padding:30px;font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
.firstcharacter { 
  float: left;
  color: #903;
  font-size: 75px;
  line-height: 60px;
  padding: 4px 8px 0px 3px;
  font-family: Georgia; 
}
p:first-letter { 
  float: left;
  color: #903;
  font-size: 75px;
  line-height: 60px;
  padding:4px 8px 0px 3px;
  font-family: Georgia; 
}
div {width:450px;margin:0px auto;}
h1 {border-bottom:1px dotted #ccc;text-transform:uppercase;letter-spacing:2px;font-weight:bold;margin-bottom:20px;}
h2 {font-weight:bold;margin:10px 0;}
p {line-height:1.5em;}