4 Skills to Master CSS in Squarespace
When I first started using CSS to customize my Squarespace website, I felt like a wizard.
I could have all of these really cool features on my website and I was using code to do it. That was really cool to me because it gave me a sense of independence and control. I could learn this really complex thing, all on my own.
Well, I was right and wrong. I quickly learned that just because I could paste some code quickly into the custom CSS area of Squarespace, didn’t mean that I necessarily knew what was happening. And while it did give me a leg up on small business owners who were managing their own website, it didn’t materially increase the amount of money I could charge per website, because I wasn’t confident that I could really tweak for the specifics of what my client would want. So, that’s when I really decided to go to work on learning CSS.
To this day, I’ve never taken a coding course in a formal education setting. I’ve taken a couple of online courses, and watched hours of Youtube videos and spent many more hours practicing what I was learning while building actual websites. But here’s the thing; I now feel exceedingly confident in telling my clients that I can make their website look however they want it to look — and that’s a really good feeling.
Along the way, I’ve learned a ton about CSS, and especially how it relates to Squarespace. In this article, I’d like to share with you some of the things that have really brought my skills to the next level.
Learning CSS allows you to have greater control over any website that you build.
Learning CSS gives you the confidence to charge more for your skills.
Learning CSS gives you the freedom to explore more exciting and compelling designs.
My 4 favorite skills:
- Using Variables
- Advanced Selectors
- Steal from Other Websites
- Micro Animations
Alright, let’s jump in.
1. Using Variables
Here’s a scenario you’ve likely encountered. You’ve built out a website that requires a bunch of lines of custom CSS, only to find out that the client wants to slightly change their color pallet, or their mobile breakpoints. It then takes you 30 minutes to go back though all the code to make sure all those stupid variables are changed in every single line. Then, said client decides that they wanted to stick with their original color pallet after all…
Or what about this one? You’re on a roll and writing some killer CSS for a client only to forget their hex code- “what was it? #FF08D? #WTF999?”. Sure this only takes a minute to resolve, except that it happens, every 5 minutes!!
This was super frustrating to me, and as I was looking for a solution, I stumbled upon Variables — and they have since become one of my favorite CSS tools.
Variables allow you to attach a word to a value, and then use that word (instead of the value) all throughout my code. If that value changes down the line, because the client wants a different primary color, I just change it once. If I’m writing CSS and trying to remember what the color value was, I just have to remember a word instead of a meaningless string of numbers. All you have to do is type the @ symbol then the word you want to use, and attach a value to it.
For example, this code will make all of my h1 elements my primary blue color, and give it a dashed blue underline:
@primary-color: hsl(204, 63%, 56%); // I've now attached my blue color (hsl(204, 63%, 56%)) to the word "primary-color".@border-style: 2px dashed @primary-color;// you can also attach multiple values and nest them within each other.h1 {
color:@primary-color;
border-bottom:@border-style;
}
The browser will read this as:
@primary-color: hsl(204, 63%, 56%);
@secondary-color: hsl(345, 100%, 50%);h1 {
color:hsl(204, 63%, 56%);
border:2px dashed @primary-color;
}
Fun fact: the CSS we use in Squarespace is actually a programming language called LESS, which is a Pre-Processor of CSS. Any code you put into the Custom CSS area of Squarespace is then processed into actual CSS which is what the browser reads. LESS makes CSS easier to read and write for us mere mortals.
2. Advanced Selectors
What are selectors you ask? If you’ve ever used CSS, you’ve used selectors. If you want to make all of your links blue, you might use the code:
a {
color:blue;
}The “a” is the selector. You’re telling the CSS to “select” all of the links <a></a> in your html and set their color property to blue.
So that brings us to… Advanced Selectors.
Advanced Selectors are amazing. These are also called pseudo-selectors, but I like to call them “advanced” because that makes me feel advanced instead of feeling… pseudo…
Advanced selectors allow you to pick specific elements on your page, even ones without Block-ID’s.
Here are some neat-o things you can do with advanced selectors:
Highlight the first blog post in your summary block.
Use the pseudo-selector, :first-child.
.summary-item:first-child{
background:coral !important;
}//The above code is selecting the first summary item in a summary list
Make the first letter in your article a drop-letter.
(use the pseudo-element, ::first-letter.)
p::first-letter{
font-size:3rem;
}
//The above code will select the first letter in every paragraph element on your website and change it's size to 3rem
Highlight the third nav item in your main nav.
Use the :nth-child(3) selector.
.header-nav-item:nth-child(3){
a{
color:red;
}
}//The above code is selecting the 3rd element in the header-nav-item class and changing all links (a) to the color red.
The possibilities are endless and I love it.
3. Learn How to Steal
Now of course, I’m not recommending you actually steal code from someone else and claim it as your own, but there is a LOT you can learn from other people’s code — especially from companies who spend millions on their website like Apple, Spotify, and Stripe.
Open up a site you like, jump into developer mode (When on a webpage, hit Command + Option + I on a mac) and look at how the HTML is structured and its corresponding CSS properties. Turn some of the properties off, turn them back on — play around with it and see how the CSS and HTML interact.
Learn from those who are doing it great.
4. Micro Transitions
Micro transitions are what bring a website from good to GREAT. They are barely noticeable, but they subtly add a sense of calm and grace to your website. The have a way of hitting the subconscious of a user that is unlike anything else.
In the real world, there are transitions periods from one state to another . When you flip a switch it moves, it’s not instantaneously switched. Drawers slide open, they aren’t instantly opened. Your website should have these features too. Micro animations give the user an ability to understand their virtual actions and make the website slightly less tech-y and slightly more friendly.
That’s where CSS transitions come in. You should use them whenever you want to indicate a state change (I mostly use them on hover effects and they work like a charm).
Super Pro CSS Move: Turn animations into variables to keep your animations consistent across your entire website.
Transitions are actually a CSS property (in the same way font-size is). The syntax looks like this:
In the above example, the width would take 2s to transition after a 1 second delay using a linear movement transition function (nerd-speak for how smoothly the transition happens).
Here are a couple of animations I used on our new OTIS website.
Portfolio Slider Transition
Notice how to the images slide up, then slide back down. This is using the “translate” to reposition the images, then the transition property to transition them between their 2 positions.
This one was a bit tricky, so follow with me here and be sure to note the differences between “transition” and “translate”.
First, using keynote, I made this image. Solid black backgrounds with the website on the bottom.
Then I added this little bit of CSS to transform the image:
.grid-image-inner-wrapper img{
transform: scale(1.5) translateY(10%);
//Scale Zooms in, TranslateY moves the picture up 10% transition: transform 1s;
//This is the transition property. It transitions the transform property over 1 second. }
which made the images look like this:
Now time for the fun transition part, I just added this little bit of CSS to make the image slide up.
//the ":hover" pseudo-selector allows you to change an element's properties when your mouse hovers over it. .grid-item:hover {
.grid-image-inner-wrapper img{
transform: scale(1.5) translateY(-16.5%);
//keep the image still zoomed in, but now move (or translate) the image up to -16.5% of its size transition: transform 1s;
//This transition makes sure the "transform" property is moved smoothly between its previous state, and its new state. }
}
Wrap Up
Squarespace as a platform is pretty awesome, but as Squarespace 7.1 roles out, it’s going to be a lot easier for non-designers to build beautiful websites. Learn CSS to really make your websites stand out from the crowd. I would love to learn & hear what it is that you’re doing to make your websites great.
If you’re interested in continuing to learn more about Squarespace and invest in a CSS skillset, sign up for my month-ish (about once a month…ish) newsletter.
