Guide to 12 Popular CSS Properties for Squarespace Customization

CSS (Cascading Style Sheets) is a language that allows you to control your website's style. Squarespace makes it easy to customize your website's look and feel using CSS, even without coding experience.

This guide covers 41 popular CSS properties to customize your Squarespace site. For each property, I'll provide a brief description, the possible values, and some examples.

Note: These properties are standard CSS properties and their fundamental values. Squarespace-specific selectors or classes are not included. Always back up your Squarespace site before making changes.

1. color

The color property controls the color of text, backgrounds, and other elements on your website.

• Values: Hex code (#FFFFFF), RGB (rgb(255, 255, 255)), color names (red)

Example:

body {
  color: #ffffff;
}

2. background-color

The background-color property controls the background color of an element.

• Values: Same as color

Example:

.my-element {
  background-color: #ffffff;
}

3. font-family

The font-family property controls the font of text on your website.

• Values: Font names (Arial, Helvetica, sans-serif)

Example:

body {
  font-family: Arial, sans-serif;
}

4. font-size

The font-size property controls the size of text on your website.

• Values: px, em, rem, %

Example:

body {
  font-size: 16px;
}

5. font-weight

The font-weight property controls the thickness of text on your website.

• Values: normal, bold, bolder, lighter, 100 to 900

Example:

body {
  font-weight: bold;
}

6. font-style

The font-style property controls the italicization of text on your website.

• Values: normal, italic, oblique

Example:

body {
  font-style: italic;
}

7. text-align

The text-align property controls the alignment of text on your website.

• Values: left, right, center, justify

Example:

.my-element {
  text-align: center;
}

8. line-height

The line-height property controls the spacing between lines of text on your website.

• Values: Numbers (1.5), px, em, rem, %

Example:

body {
  line-height: 1.5;
}

9. text-transform

The text-transform property controls the capitalization of text on your website.

• Values: uppercase, lowercase, capitalize

Example:

body {
  text-transform: uppercase;
}

10. text-decoration

The text-decoration property controls the underlining, overlining, and strikethrough of text on your website.

• Values: none, underline, overline, line-through

Example:

body {
  text-decoration: underline;
}

11. letter-spacing

The letter-spacing property controls the spacing between letters on your website.

• Values: normal, px, em

Example:

body {
  letter-spacing: 1px;
}

12. border

The border property controls the width, style, and color of the border around an element.

• Values: 1px solid #000000

Example:

.my-element {
  border: 1px solid #000000;
}