Caffeine

Are you looking for an easy way to add a little style to your blog? Well then take a look at these simple and easy to use inline drop cap styles.

Clean and easy to use style. You can of course change the colour to anything you want and if you desire you can specify a different font face. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porttitor eleifend nunc. Aliquam lacinia mauris. Pellentesque tempor. Sed porttitor. Vestibulum tincidunt risus venenatis dolor. Pellentesque sit amet massa sit amet pede luctus vehicula. Mauris tincidunt. Vivamus sit amet nulla eu nulla condimentum tempus. Duis sapien est, adipiscing in, aliquam id, euismod ac, orci. Suspendisse potenti. Praesent magna tortor, imperdiet sit amet, pharetra ut, laoreet nec, tellus. Fusce quis neque quis lorem adipiscing tincidunt. Morbi id nibh non elit sodales dictum.

<span style="float:left;
margin-top:0px;
color:white;
width:38px;
font-size: 56px; 
line-height:48px;">C</span>

Another interesting style is to raise the first letter by itself rather than drop it. Again, you can change the colour, the size or the font face to anything you like. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porttitor eleifend nunc. Aliquam lacinia mauris. Pellentesque tempor. Sed porttitor. Vestibulum tincidunt risus venenatis dolor. Pellentesque sit amet massa sit amet pede luctus vehicula. Mauris tincidunt. Vivamus sit amet nulla eu nulla condimentum tempus. Duis sapien est, adipiscing in, aliquam id, euismod ac, orci. Suspendisse potenti. Praesent magna tortor, imperdiet sit amet, pharetra ut, laoreet nec, tellus. Fusce quis neque quis lorem adipiscing tincidunt. Morbi id nibh non elit sodales dictum.

<span style="color:white;
font-size:56px;
font-weight:normal;
line-height:80%;">A</span>

This is the best size for a pale or transparent font colour. Its large size makes even the dimmest of colours legible. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porttitor eleifend nunc. Aliquam lacinia mauris. Pellentesque tempor. Sed porttitor. Vestibulum tincidunt risus venenatis dolor. Pellentesque sit amet massa sit amet pede luctus vehicula. Mauris tincidunt. Vivamus sit amet nulla eu nulla condimentum tempus. Duis sapien est, adipiscing in, aliquam id, euismod ac, orci. Suspendisse potenti. Praesent magna tortor, imperdiet sit amet, pharetra ut, laoreet nec, tellus. Fusce quis neque quis lorem adipiscing tincidunt. Morbi id nibh non elit sodales dictum.

<span style="float:left;
color:#1e1e1e;
font-size:80px;
line-height:60px;
padding-top:2px;padding-right:5px;">T</span>

One more for you. Rather than just use a simple drop cap, this style also places a box around the letter. You can fill it with any colour you like. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porttitor eleifend nunc. Aliquam lacinia mauris. Pellentesque tempor. Sed porttitor. Vestibulum tincidunt risus venenatis dolor. Pellentesque sit amet massa sit amet pede luctus vehicula. Mauris tincidunt. Vivamus sit amet nulla eu nulla condimentum tempus. Duis sapien est, adipiscing in, aliquam id, euismod ac, orci. Suspendisse potenti. Praesent magna tortor, imperdiet sit amet, pharetra ut, laoreet nec, tellus. Fusce quis neque quis lorem adipiscing tincidunt. Morbi id nibh non elit sodales dictum.

<span style="margin-right:6px;margin-top:5px;
float:left;
color:white;
background:#0066cc;
border:1px solid #0066cc;
font-size:80px;
line-height:60px;padding-top:2px;
padding-right:5px;">O</span>

So now you know of four different ways to style your blog postings. Try to remember though that a little goes a long way when it comes to using these.

In case you are wondering, I used filler text called "Lorem Ipsum" to demonstrate the drop caps look.