CSS and Squarespace: Getting Started

Squarespace is a web platform for building websites without having to write code. You likely know that if you're reading this, else you wouldn't care about this article and its topic. The Squarespace promise is one of gorgeous template designs that you build out with drag-and-drop ease. 

Yet no matter how good the template, there is always just that one little tweak that wasn't accounted for by the template's designer. Without dropping into code mode, you're limited to the choices the designer pre-thought for you when creating the template. That may be enough, but it really isn't.

Put a group of Squarespace customers into a room, and you likely won't go three minutes without the conversation drifting toward something called "see ess ees". That's a reference to CSS, an abbreviation for Cascading Style Sheets, and their style rules are the doorway to a happy medium between being locked into templates as they are designed and having to write all your website code from scratch.

Setting the Right Attitude

Making CSS modifications in Squarespace is a careful dance between your own knowledge of HTML and CSS, what you know about what might be possible and that you can learn to do, and the choices the template designer made without necessarily having your needs in mind. Approach CSS as a journey. Be content with what you know how to do today while viewing each new design challenge as an opportunity to stretch and learn more. Don't try to make the journey all in one leap. Relish each step of discovery and build your skills through a series of many small successes. 

Don't try to make your template into something it's not. Squarespace's Answers forum is filled with postings from customers who've chosen a template only to turn and ask how to accomplish something very different from what the template was created to do. Color and font changes are generally easy and safe, and achievable. Changes that mildly affect layout on a page are sometimes doable, but bring greater risk. You're going too far though, when you begin to ask questions like: "How do I change my page title into a video?" or "How do I make my blog excerpts appear as a slide show?" Some changes are just too big of a leap. 

Avoid treating CSS snippets as "magic incantations" that you drop into your site's design without understanding how they achieve their goal. You'll eventually be trapped in a tangle of style definitions that frustrate your every design change unless you invest the time to learn and understand what it is that you're doing. It's ok to drop something in as quick fix, to get a fast result, but then take a pause to learn about what you've just done. I promise, what you learn will pay off in spades. 

Tip! Take the attitude that you own your CSS, including taking responsibility for whatever bad results might come about from dropping in a rule that you've written. Kf you write the code, then own the results. Squarespace can't possibly hand-hold each customer as they learn CSS, and it's unfair to expect it of them. 

Looking at a Simple Problem

A good place to begin with CSS is to make some simple color and font-style changes. Figure 1 shows a case in which some color changes are desirable, and they are not accommodated by what the template provides in the Style Editor. You see the bottom half of my local church's home page, and the distinction between the page body and the footer area is not well-defined.

Figure 1. The page footer is not clearly distinct from the page body

A wide swath of blue links on a white background begins in the main body of the page and sweeps down all the way to the very bottom. The horizontal line demarcating the page footer is not enough to overcome the effect of that blue and white sweep of color, and the eye does not perceive the page footer as distinct from the main body. 

Note! Figure 1 represents an actual problem that I solved while writing this article.

One solution is to shade the footer background and present the footer links in a different color from the main body links. The site is built in the Squarespace Five template, and that template makes no provision for changing footer background and link colors. I'll need to use CSS, and just a couple lines of it will do the job.  

To change the footer's background and link colors, I need to be able to do two things:

  1. Identify the footer area
  2. Target only the links in the footer

These two tasks end up being linked. Targeting the links in the footer implies that I'm able to identify what part of the HTML makes up the footer to begin with. 

Viewing the Page Source

Now is when it helps to have some rudimentary knowledge of HTML and CSS. You need to be able to look at the underlying HTML for a page and have at least a vague grasp of what is going on in order to identify the page elements that you plan to target with CSS. If you lack basic comprehension of HTML and CSS syntax, then buy a good introductory book and read it. You won't regret the investment.

I'm running Google's Chrome browser. You can bring up a web page in Chrome and press CTRL-U to view the page's HTML source code. Figure 2 shows what that looks like for the page from Figure 1.

Figure 2. It all means something, but you can ignore much of it

Don't be intimidated by all the code, and don't worry about comprehending all of it. A quick way to hone in on the HTML that matters is to press CTRL-F and search for a string of text that you want to style. There is a "Cleaning Schedule" link in my page's footer area. I can press CTRL-F and search for that string. Doing so gets me to the following passage of code:

<div class="sqs-layout sqs-grid-12 columns-12" data-type="block-field" data-updated-on="1389495722557" id="footer-blocks"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-433b86ebf6d00baef9ec"><div class="sqs-block-content"><p><a href="/cleaning-schedule">Cleaning Schedule</a>&nbsp;| <a href="/links">Helpful Links</a>&nbsp;|&nbsp;<a href="/offering-schedule">Offering Schedule</a></p></div></div></div></div></div>
</div><!-- page-footer-wrapper -->

Yes, it's messy. That's how the code will look. You can still ignore most of it. The pattern you should be looking for, and that I am looking for, is the following:

<tag ...>search text</tag>

Find "Cleaning Links" in the source and sweep left until you reach a left angle bracket (the < character). That angle bracket begins an HTML <a> tag. That tag indicates a hyperlink. Sweep right looking for the corresponding </a> tag. The entire HTML element is then as follows:

<a href...>Cleaning Schedule</a>

Here you should take a pause. Do you know the purpose of the <a>...</a> element? If not, take a few minutes to read about what the tag does. Don't worry about mastering every detail. Just read enough to get the gist. For example, you can read about the <a> tag at w3schools.com.

The <a> tag defines a link, and it is the links in my footer that I want to color differently. I can target them through the <a> tag, but how do I limit the scope to just the <a> tags in my footer? 

Figure 3 shows the answer. Work your way back up the source from the footer links. You'll begin to encounter HTML div tags. These tags are often used to distinguish regions on a page, and that's precisely the case in the example. You'll find one named page-footer, and just above it is another named page-footer-wrapper.

Figure 3. The page-footer-wrapper div is a likely-sounding target

A certain amount of detective work is sometimes needed to tease out the correct div or other enclosing element to target. Look at enough Squarespace pages though, and you'll begin to see certain patterns. For example, there is also in my page a page-header-wrapper, a page-body-wrapper, and so forth. These wrappers are not always named the same in each template, but their names are usually evocative of the page regions they enclose.

Coloring the Background

One of my design goals is to change the background color in the footer region. A quick, Google search on "CSS background color" brings back as the first result a page describing the background-color property. Knowing that I want to target the page footer, I can now write the following line of CSS:

#page-footer-wrapper {background-color: #a5a5a5;}

The leading pound-sign (#) indicates that page-footer-wrapper corresponds to a target's ID attribute. In this case, that target happens to be a div tag specifying id="page-footer-wrapper".

The sequence #a5a5a5 is one of several available ways for specifying a color value in CSS. The result will be equal amounts of red, green, and blue, leading to a shade of grey. I've chosen the same shade of grey that is specified in the Squarespace Style Editor for Lines and Decorations in my template. 

Don't be afraid of some trial-and-error. You may find more than one plausible div element to target, and each of those might affect a different region of the page as it is displayed in the browser. It might take a couple attempts to nail down the correct target for the result you're after. 

Coloring the Footer Links

My other design goal is to change the color of the footer links to something other than the bright blue used in the page body. I already know how to change color, so I don't need to bother looking anything up. I can target the links through their <a> tags. I've decided black is a good color, so I'll write the following CSS:

a {color: #000000;}

But wait! This CSS style rule will target all the links throughout the entire page. That would turn them all from bright blue to black. That's not what I'm after, so I'll restrict the rule such that it takes effect only inside the page footer. I'll do that by placing #page-footer-wrapper in front of the rule. For example: 

#page-footer-wrapper a {color: #000000;}

Now the rule will affect the display of <a> tags only when they are enclosed within the div element specifying id="page-footer-wrapper"

Note! The pound sign (#) in front of #page-footer-wrapper makes it an ID selector. There are also such things as class selectors. Read about the difference, which is important to understand very early in your work with CSS.

Now it's time to add these rules to my site and see whether they deliver the results I'm looking for. 

Adding the Rules to the Site

Squarespace provides options for injecting CSS into your site design. When you want a rule to affect all the pages, it's typical to place the rule in the Custom CSS Editor. Here's what to do:

  1. Go to Style Mode by clicking the paintbrush icon at the lower right of your page.
  2. Scroll all the way down in the Style Editor on the left side of your screen.
  3. Click the Custom CSS button.
  4. Click Confirm in response to the warning about adding custom CSS to your site's design. 

You'll see an editor open like the one in Figure 4. Type your CSS rules into the editor and click the Save button. Each rule should take effect the moment you finish typing it. In that way, you can preview your changes to be sure of the results. Click the Save button to make the changes part of your live site for everyone to see. 

Figure 4. Place your styles rules into the Custom CSS Editor, and watch them take effect

You can leave the style editor window open and continue to make changes to your style rules even after exiting Style Mode and navigating to other pages in your site. That gives you the freedom to move to move around on your site and view different pages, and make rule adjustments on the fly. Squarespace can be temperamental though, and you may have to dismiss errors about unresponsive pages by clicking a Wait button in the error dialog that might pop up annoyingly from time to time.

Tip! There's a detailed walk-through on the Squarespace help site showing how to invoke the Custom CSS Editor. It's there if you need it, and it shows a screenshot for each click that you must make on the way to invoking the editor window in Figure 4.

Enjoying the Results

Figure 5 shows my final result. I'm very pleased. The visual confusion is gone. The change in background and link colors clearly sets the footer apart from the main body of the page.

Figure 5. Now the footer is a region clearly distinct from the main body of the page

What about you? Have you made your first CSS style rules, and have they worked? Sit back and enjoy the accomplishment. Also take some time to invest in your future design efforts by reading about the tags and attributes and syntax making up the rules you've created. Doing so helps build a base for the future by exposing you to other aspects of CSS and HTML that might help in solving future design problems.

Learn CSS for Squarespace 7

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart
SquarespaceJonathan Gennick