How to style bold text in Squarespace list section descriptions

If you're using a Simple List Section in Squarespace and want to customize the appearance of bold text within description boxes, you can achieve this using a bit of CSS.

The following code targets bolded text—typically created with <strong> or <b> tags—in the description boxes of your simple list layout. You can adjust the font, color, and size to match your website’s style:


Step 1: Add custom CSS in Squarespace

  1. Go to Design > Custom CSS in your Squarespace site editor.

  2. Paste the following CSS into the editor

  3. Save your changes.

.user-items-list-simple .list-item-content__description strong,
.user-items-list-simple .list-item-content__description b {
  font-family: YOUR-FONT-NAME !important; /* Custom font */
  color: #ff6600 !important; /* Custom color */
  font-size: 1.2em !important; /* Custom size */
}

What this code does:

  1. Targets Bold Text: The selectors .user-items-list-simple .list-item-content__description strong and .user-items-list-simple .list-item-content__description b ensure the styles apply only to bolded text in the simple list description boxes.

  2. Customizes Appearance: The font-family, color, and font-size properties allow you to define a unique look for bolded text, like changing its font to "Courier New", coloring it orange, or resizing it.

Previous
Previous

Subtle Logo Bounce on Hover for Squarespace header logo

Next
Next

Styling the Squarespace 'Login' text into a button