CSS Basics + Squarespace

tips and tricks squarespace css

In just a few days I'll be sharing the first post in a series on simple (but significant!) CSS tricks you can implement on your Squarespace site to really elevate your website and separate yourself from anyone else out there using the same template. But first I thought we should cover the basics of CSS and how to implement it on Squarespace, plus I'll leave you with my favorite resources I use when I need help figuring out CSS code. Let's start with the most basics question:


01 | What is CSS and how do you make sense of it?


I'm going to pull the explanation of CSS straight from my favorite CSS resource: 

"CSS stands for Cascading Style Sheet and describes how HTML elements are to be displayed on screen. CSS saves a lot of work, as it can control the layout of multiple web pages all at once."

A snippet of CSS code will contain at least one selector, property and property value, though it can contain two or more of any of those elements. Here's a very basic example:

h1 {
  color: black;
  size: 20px;
}

In this example, h1 is the selector (aka the element we're trying to customize), color and size are the properties, and black* and 20px are the property values. The selector is written first, then the property and property value are contained in brackets {}. Each property/property value has to end with a (;) before the next property/property value can be "read", though you don't have to enter them on separate lines. It could also look like this and achieve the same results:

h1 {color:black;size:20px;}

The important parts are the brackets and semi-colons. As you can see from the example above, spaces aren't even a necessity for CSS - though I'd recommend having line breaks and spaces to help you organize and make sense of your code.

* Using a basic color name for any color property will certainly work for you, but I'd recommend using a hex code instead to help you hone in on specific colors/hues. Your style editor uses hex codes (or rgb values, which can also be used in CSS), so I'd recommend pulling the hex codes from there when customizing colors via CSS.


02 | Basics of "figuring out" code


So, how do you even start writing CSS code or figuring out the selectors, properties and property values?

The most basic way is through using the "inspect" (or "inspect element") tool. You do this by figuring out what element you want to customize, right clicking (or control + click) on that element, then selecting "inspect" or "inspect element" from the menu that pops up.

If you've never done this before, please don't be alarmed by what comes next! The screenshots below will walk you through some of the basics:

Right click and select "inspect" or "inspect element".

01: The blue box highlights what item you're inspecting.
02: The code on the left is HTML and let's you select different parts of the webpage to inspect. The elements on the actual page will become highlighted and correspond to the HTML element that you're hovering over.
03: The code on the right side is the CSS. The CSS breaks down different parts of the element you're inspecting. All of the selectors will be in front of the first bracket, and all properties and property values will be inside of the brackets, just like I showed you at the beginning of this post.

I've stretched the code box up so you can see more of what's going on in the CSS portion. Some things to note:
01: The actual webpage has the heading highlighted since that's what we're inspecting.
02: The CSS portion is what I'm manipulating in this example. I'm going to change the color, font-size, text-transform, letter-spacing and font-weight properties.

And this is what it looks like after changing those elements around.

If you move down the page and click on a new element, you'll notice that the blue highlighted block changes to reflect the new element, along with a new set of CSS code.

For this code I changed the font color, font-size and text-transform.

If you exit out of the inspect box, you'll be able to see that the webpage took on the new property values for all items listed under the element you were inspecting. In this example it was the H1 and H2 headers, so any other element that was listed as the same thing took on the new property values.

However, this change was only cosmetic and didn't actually change the hard coding for your site. Once I refreshed the page, all code reformatted back to it's original state.


03 | How to incorporate it on your Squarespace site


The next logical question is how do we change the CSS and actually make it stick?

The easiest way is to use Squarespace's "Custom CSS" feature, though I'll be showing you a more advanced way to add code later on in this series. You can find the CSS code feature by going to the "Design" tab and clicking "Custom CSS" (screenshots below).

The little white box is where you'll write in your code. You'll be able to preview the changes before you save, so make sure the web page you're on while writing the CSS has at least one of the elements on it that you'll be customizing. 

I like to copy code when I'm in the "inspect element" mode and paste it into the CSS box. I do this in two separate browser tabs so I can go back and forth between the two.

Once your code is how you want it, just click "save" and the change will go live!


04 | CSS resources


With this post I wanted to give you a very basic overview of CSS and how to use it on your Squarespace site, but I also want to leave you with some resources to help you learn more and experiment with CSS. My two go-to sites are W3Schools and the CSS Squarespace forum. I've also found a lot of answers to specific questions by adding "squarespace" to the end of my searches in Google or Pinterest. There's lots of stuff out there!

Check back on Friday for part 1 in my series about using CSS to customize your Squarespace site!
Β