[Solved] How to Create Drop Cap using CSS and HTML Code?
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.
Code to Create Drop Cap using CSS and HTML
There are two ways to implement Drop-Cap on your webiste.
#1 Using class attribute
<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.
#2 Using first-child:first-letter:
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:
- Before making changes to your website, you should test your design- which looks better, cozy, color combination and easy to read using online HTML editor.
- We have tested this code on Google Chrome and Mozilla Firefox browsers, it is working fine. You should test your code on all the standard desktop and mobile browsers before committing your code changes.
- In the above example, we have embedded CSS code in HTML file. You can write CSS and HTML in a separate file.
Some points to remember while applying a drop cap to your content.
When you should not use Drop-Cap…
- if your content is right aligned
- when you have only one or two lines in your first paragraph
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.
Comments
Rusk
Thanks for sharing this automatic way of doing. I copied your code to my blog. After some tweaks, it is working.
Aniruddha Chaudhari
You’re welcome, Rusk! Happy Blogging!