Code

CSS Guide

CSS (Cascading Style Sheet) is a language for styling or formatting web documents to visually control how content appears. In Squarespace 5, built-in style editing tools allow you to quickly customize style sheets across your entire site. However, you can also style specific pages or elements within your site — by applying CSS rules.

How To Apply CSS Rules

CSS rules are statements that define how elements should be displayed. They are composed of two main parts: a selector (the element you want to target) and a declaration (the style rules you want to apply to the targeted selector).

In Squarespace, CSS rules you create can be added to the Custom CSS pane of the style editor [Style Editing (paintbrush icon) > Custom CSS].

How To Locate Selectors

Squarespace sites are based upon Core Template Containers composed of primary structural elements, identifiers and classes. 

To locate elements specific to a page or module on your site, you can use an inspection tool.  All modern browsers have built-in tools / extensions for locating specific selector elements.

• Safari: From Preferences > Advanced > select Show Develop Menu > Right-click and choose Inspect Element
• Firefox: Install the Firebug Extension > From the Tools menu > select Firebug > choose Inspect Element
• Chrome: From Page Menu > Developer > choose Developer Tools > Right-click and choose Inspect Element
• Internet Explorer: From the Tools menu > select Developer Tools

How To Target and Modify Selectors

Every page and module within your Squarespace site is assigned its own unique ID (unique identification number). It is this specific ID number that differentiates between common elements — allowing you to target selectors and modify them without affecting other similar elements on your site.

For instance, you can change something on just one specific page of your site by using the unique ID for that page within your custom CSS rule.

Below is an example scenario demonstrating how to target and modify selectors within your Squarespace site.

Scenario

You want to target and modify the background color of a sidebar column on one specific page only.

Solution

Step 1: Locate the page's unique ID:

body id="modulePage650000"

Step 2: Locate your target element within your page source HTML:

#sidebar1Wrapper

Step 3: Write a custom CSS rule placing the unique ID for that specific page as preceding selector to the targeted element:

#modulePage6500000 #sidebar1Wrapper {background-color: #ccc;}

Example

Here '#sidebar1Wrapper' is targeted as a descendant of '#modulePage6500000'. Applying this CSS rule changes the background color of Sidebar 1 only for this specific page.

Customizing and Creating Selectors

Squarespace allows you to customize existing selectors as well as create entirely new ones.  

Customizing an existing selector applies the customization to that element throughout your entire site.

Scenario

You want to target and modify the background color of a sidebar column.

Solution

Step 1: From within [Style Editing (paintbrush icon) > Advanced > Edit Customizable elements] add the existing selector to the selector field:

#sidebar1Wrapper

Step 2: Assign a name to this selector :

Vertical Navigation | Sidebar 1

Example

The #sidebar1Wrapper selector will now appear within the Fonts and Colors editor so you can customize the style using the built-in editing tool. See also: Advanced Settings.

Creating your own selector applies a customization to a page when you have added the selector within the Advanced Style Elements - and called that selector within your page HTML.

Scenario

You want to feature a specific block of text to have a unique background color and border at the top of your page.

Solution

Step 1: From within [Style Editing (paintbrush icon) > Advanced > Edit Customizable elements] add a selector ID to the selector field:

#myblock

Step 2: Assign a name to that selector :

Featured Content | My Block

Step 3: Call your unique selector within your HTML page (include the correct HTML < > brackets around your div tags):

<div id="myblock"> - CONTENT HERE - </div>

Example

The #myblock selector will now appear within the Fonts, Colors and Style editor so you can customize it using built-in editing tools. Additionally, you can further style your unique selector (such as specifying width or height), by adding these attributes within a custom CSS declaration.