Editing Text Size and Colour

What does this code do?

These code snippets allow you to edit the text size and colour in various ways.

Squarespace Editor

Font Size and Colour Site Wide

To make changes to the font size and colour across your whole website, use the Squarespace Editor.

• Squarespace 7.0: Design > Site Styles

• Squarespace 7.1: Design > Fonts and Design > Colors

The Site Title and Header Navigation

To make changes to the font size and colour of the Site Title and Header Navigation, use the Squarespace Editor.

• In Squarespace 7.0 go to Design > Site Styles and click on the Site Title or Header Navigation.

• In Squarespace 7.1:

  • To edit the size of the Site Title or Header Navigation go to Design > Fonts, select the gear icon next to the selected font and then choose Advanced.

  • To edit the colour of the Site Title or Header Navigation go to Design > Colors and click on pencil icon next to the theme you are using in the Header.

Code Snippets

Copy and paste this code into Design > Custom CSS

SELECTOR h1 {
  font-size: 1.2rem;
  color: red !important;
}

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* The Whole Footer */
footer

/* The Top Footer Section */
.Footer-blocks--top

/* The Middle Footer Section */
.Footer-blocks--middle

/* The Bottom Footer Section */
.Footer-blocks--bottom

/* One Section */
#PAGEID

/* One Text Block */
#BLOCKID

Squarespace 7.1

/* One Page */
#COLLECTIONID

/* The Whole Footer */
#footer-sections

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1)

/* One Text Block */
#BLOCKID

To target one sentence or one word, it may be easiest to use a code block.

Copy and paste the following within a code block.

<!--To target one sentence -->
<div class = "CLASSNAME">
  <h1>TEXT GOES HERE.</h1>
</div>

<!--To target one word -->
<div>
  <h1>TEXT <span class="CLASSNAME">GOES</span>HERE.</h1>
</div>

Then copy and paste this code into Design > Custom CSS

/*To target one sentence */
.CLASSNAME h1{
  font-size: 1.2rem;
  color: red !important;
}

/*To target one word */
.CLASSNAME{
  font-size: 1.2rem;
  color: red !important;
}

How To Use It

1. Copy and paste the code as indicated above.

2. Choose the selector that matches your situation.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

5. Change h1 to target the type of text you want to change.

   • h1 = Heading 1

   • h2 = Heading 2

   • h3 = Heading 3

   • h4 = Heading 4

   • p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

   • a = Link

6. You can use a word, rgb, or hex code for the color.