Magazine style drop cap first letter with CSS

When was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap makes your paragraph catchy and stylish. First letter drop cap can be achieved in many ways using CSS. Two ways are going to be discussed on this article.

1. Using span tag to style the first letter
2. Using pseudo element :first-letter

1. Using span tag to style the first letter

.firstletter {     display:block;     float:left;     margin: -0.63em 0.5em 0 -0.56em;     height : 4.5em;     color:#aaa;   }
.firstletter span {     font-size:200%;     line-height:1.0em;   }   
.firstletter + span{     margin-left  : -0.5em;   }

You might be interested to know about + sign in above CSS code. It is adjacent-sibling selector that was introduced in CSS 2. Adjacent-sibling targets an element directly after another element with the same parent.

How to Use it?

<span class="firstletter">
  <span>W</span>
</span>hen was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap can be achieved in many ways.

You can view Live Demo here.

2. Using pseudo element :first-letter

Most of the sites use span technique for the drop cap first letter. With invent of CSS 2, the :first-letter pseudo-element was introduced for this purpose. It’s easy creating drop caps with :first-letter. Most of the latest browsers supports :first-letter pseudo element.

p:first-letter {
font-size:400%; 
display:block;
float:left;
margin: 0.06em 0 0;
height:3.5em;
color:#ccc; 
}

How to Use it?

When was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap can be achieved in many ways.

You can view Live Demo here.

Inside the STYLE tag, we added style for paragraph, and suffix it with the code :first-letter, and whatever declarations that follow will be applied to the first letter of that paragraph.

Some fix might be needed for cross browser compatibility.