Drop cap CSS

Another excellent method of making the start of the text, inherited from ancient scribal practice, is a large initial capital: a versal or lettrine. Versals can be treated in many ways. Indented or centered, they can stick up from the text. Flush left, they can be nested into text (typographers call these drop caps, as oppose to elevated or stick-up caps.) If there is room, they can hang in left margin. They can be set in the same face as the text or something outlandishly different. In scribal and typographic tradition alike, where the budget permits, versals too are generally red or another color in preference to black.

Syntax

p:first-of-type:first-letter {
	font-size: 6.8em;
	padding:.12em .1em 0 0;
	margin: 0;
	float: left;
	line-height: .8;
	font-family: 'Bevan', cursive;
	font-weight:400;
	color: red;
	}	
	
	/* Clear Drop cap on blockquote*/
	blockquote p:first-of-type:first-letter {
	font-size: 1em; 
	padding: 0; float: none; 
	font-family:'Lato', sans-serif;  
	font-weight:400;  
	}

Dropcap.js

Another excellent method of making the start of the text, inherited from ancient scribal practice, is a large initial capital: a versal or lettrine. Versals can be treated in many ways. Indented or centered, they can stick up from the text. Flush left, they can be nested into text (typographers call these drop caps, as oppose to elevated or stick-up caps.) If there is room, they can hang in left margin. They can be set in the same face as the text or something outlandishly different. In scribal and typographic tradition alike, where the budget permits, versals too are generally red or another color in preference to black.

Syntax

<script src='../js/dropcap.min.js'></script>
<script>
    var dropcaps = document.querySelectorAll(".dropcap"); 
    window.Dropcap.layout(dropcaps, 3); 
</script>