While surfing the internet and looking at some of the webpages, ever wondered- What’s that First capital letter of the article content that goes the deep couple of lines?
This is nothing but the Drop Cap. It can be an initial letter or word or sentence (even paragraph, but not recommended).
In this tutorial, I am going to give you simple code snippet to create drop cap using CSS and HTML tags. Using which you can set drop cap on your website, just by copy-paste.
The main intention and purpose of using Drop Cap are to attract the readers and to makes your content more lucrative. There are many content delivery websites or blogs use Drop Cap.
Drop cap has the history. And you can see it is used in magazines for long ages. Now it has carried forward to design web pages with simple HTML and CSS code tweak.
If you are a web developer you can easily implement Drop Cap with just a couple of HTML and CSS code.
There are two ways to implement Drop-Cap on your webiste.
<head>
<style>.drop_cap {
color:#888;
float:left;
font-size:3em;
font-style:normal;
text-shadow:#333 1px 1px;
}</style>
</head>
<body>
<span class="drop_cap">R</span>ahul Dravid makes history by coaching U19 Cricket player.
Under his guidance, U19 players won the world cup. India has won the world cup four times which is more than any other cricket playing country in the world. It is all about the teamwork and effort made by their coach, Rahul Dravid. Well done, India!!
</body>
The above is just an example. You can modify the various parameter value as per your need such as changing the color of Drop Cap, increasing font style and size, text shadow, dept of the drop-cap…
In this method, you have to update each HTML page to add the class attribute for the first character. It is Hectic.
But what if you already have many web pages ready and you don’t want to go to each web page and add a class attribute in your HTML code.
So here is the simple tweak.
There is first-child:first-letter which is supported by many of the standard browsers. You can use it in your CSS code without updating HTML code.
<head>
<style>
p:first-child:first-letter{
float:left;
font-size:400%;
margin-top:7px;
margin-right:5px;
color:#992E00;
}
</style>
</head>
<body>
<p>Rahul Dravid makes history by coaching U19 Cricket player. Under his guidance, U19 players won the world cup. India has won the world cup four times which is more than any other cricket playing country in the world. It is all about the teamwork and effort made by their coach, Rahul Dravid. Well done, India!!</p>
</body>
Instead of writing inline CSS code I would recommend writing your own CSS file and add it in your HTML file.
I prefer this method. With this method, you just need to update a single CSS file, no matter how many web pages do you have on your website.
Tips for setting Drop-Cap:
Some points to remember while applying a drop cap to your content.
When you should not use Drop-Cap…
If you have less number of lines than the depth of the drop cap letter, it does not look so rosy.
You can also use a symbol as a drop cap initial letter.
Any difficulty to create drop cap using CSS and HTML? Let me know in the comment.
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on <b>CSEstack.org</b> portal.
Thanks for sharing this automatic way of doing. I copied your code to my blog. After some tweaks, it is working.
You’re welcome, Rusk! Happy Blogging!