Drop Cap First Letter

dropcap.png

Step One

Add a Code Block to the page you’d like your drop cap on.

Screen+Shot+2019-04-05+at+10.48.57+AM.png

Next, copy and paste the text below into the Code Block and enter your info accordingly.

Be sure to keep all of your text within the <p> tags.

<div class="one-drop-cap">
   <p>Enter your text info here. Blah blah blah.</p>
</div>

Step Two

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Copy and paste the code below into the Custom CSS Editor box.

// Drop Cap //

.one-drop-cap p:first-of-type:first-letter {
color: #000000;
font-weight: 300;
font-size: 80px;
line-height: .97;
float: left;
padding: 5px 10px 0px 3px;
font-family: times;
}

Step Three

Change the color, font weight, font size, line height, font family, and padding to your liking.

Save and refresh the page. 👍

Moov Labs