Drop Cap First Letter


Step One

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


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>

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