Basic CSS
CSS stands for Cascading Style Sheets. This is a language that can be used to create digitally. Squarespace uses CSS among others to write their styles.
Within our templates we try to keep the CSS very simple, as we understand it can seem intimidating, atleast at first!
What we will cover:
how to access the CSS panel
basic CSS language
our top 5 codes and how to adjust them
how to access the CSS panel
Website> Website Tools> Custom CSS
basic CSS language
There is a ton that can go into creating amazing designs and movement within a website, however, we will just be sticking to the basics of how to create a simple piece of code.
Each code needs a Selector (what you want to change), a Property (what part you are changing), and a Value (what you are changing it to.)
Example you will see often:
{border:1px solid black}
There are a few ways to locate the Selector, and this is where it can get complicated. The most basic way to locate a Selector is to download the Block ID Finder on Chrome.
You can find a block id before the element name in the site source code, or you can use this free chrome extension to quickly grab block ID’s.
Some codes we like
-
Example code: {border:1px solid black}
Simply swap out the colour black for another colour of your choice. You can also use hex codes for unique colours.
-
This change all your buttons to have a coloured shadow with animation.
Copy and paste into your CSS box and play around with some of its elements. Psst! Make sure to change the hex codes (colour codes) to your brand colours.)
.sqs-block-button .sqs-block-button-element--medium {
box-shadow: 5px 5px #FF6969;
transition: all ease-in .05s; }
.sqs-block-button .sqs-block-button-element--medium:active {
box-shadow: none;
transform: translateY(4px) !important;
transition: all ease-in .05s; }
-
Would you like to have an icon, or element spin This code will rotate anything with a block ID. Refer to the CSS page to learn how to find a block ID.
Insert your block ID where it says BLOCK_ID below.
BLOCK-ID .sqs-block-content {
animation: spin-forever 15s linear infinite;
}
@keyframes spin-forever {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
