Add a Decorative Drop-Cap to your Text
Having experimented a bit with this, adjusting the font-size and line-height can be an issue.
Class Specific Dropcap
paragraph 1
paragraph 2
paragraph 3
Code
<p>paragraph 1</p>
<p>paragraph 2</p>
<p class="dropme">paragraph 3</p>
/** Just this Class will receive a dropcap **/
.dropme:first-letter {
color: #B91646;
float: left;
font-weight: bold;
font-size: 2em;
line-height: 1.9em;
padding-right: 0.1em;
margin-top: -0.1em;
}
Dropcap First Paragraph Only
paragraph 1
paragraph 2
paragraph 3
Code
<div class="guide-dropcap-01">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
/** Dropcap Only The First Paragraph **/
.guide-dropcap-01 {
p:first-of-type::first-letter {
color: #B91646;
float: left;
font-weight: bold;
font-size: 2em;
line-height: 1.9em;
padding-right: 0.1em;
margin-top: -0.1em;
}
}
Dropcap All Paragraphs
paragraph 1
paragraph 2
paragraph 3
Code
<div class="guide-dropcap-02">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
/** Dropcap All Paragraphs **/
.guide-dropcap-02 {
p:first-child::first-letter {
color: #B91646;
float: left;
font-weight: bold;
font-size: 2em;
line-height: 1.9em;
padding-right: 0.1em;
margin-top: -0.1em;
}
}
NOTES
1em equals the font size of the parent element.
1rem equals the font size of the html element, so adjusting the HTML’s font size scales other sizes from it.
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
