Your Guide to CSS Symbols: How & When To Use What

Jan 4

CSS stands for cascading style sheet and it’s a code language that a browser uses to understand how to display all the content it finds when it loads a page on your website. Learning a new language is not always an easy task; I have been trying to learn Japanese for months now and I can barely make a sentence 😅

You might have a handle on the basics of CSS like selectors, properties, and values, but there are some important things to know about the symbols that you’ll use too!

This article covers the major ones you’ll find in your code, and if you would rather watch & listen, the video below covers all this info too. 😎

, Comma

Commas can be used to separate multiple selectors in code, so you can apply the same change to multiple things. This example uses a comma to make the heading 1 and heading 2 text the color red

h1, h2 {color: red}

; Semicolon

Semicolons separate multiple properties in one line of code, so you can make more than one change to a selector. This code will change the font family and background color of heading 2 text

h2 {font-family: ‘Poppins’; background-color: red}

{ } Curly Brackets

Curly brackets are used in CSS to keep all the changes you are making to a selector in one easy to reference place for your browser. I like to think that the left bracket means “here is the code!” and the right bracket means “okay - I’m all done!” This example keeps the heading 1 font color change separate from the heading 2 color change

h1 {color: red} h2 {color: blue}

< > Angled Brackets / Carrots

Angled brackets are not technically CSS but they definitely belong in this list! When you add custom code to Squarespace in a place other than the CSS panel, you need to tell the browser it is a style code. Angled brackets help us use HTML to let the browser know to process the code as CSS. This example is what I used to give a border and box shadow to the paragraph one text on this specific blog post. I added this to a code block on this post so it would only apply on this page.

* Asterisk

This one is one of my absolute favorites! An asterisk is a catch-all that works great for making changes to all elements of a page or selector. This code will change any and all fonts on a form block to be the font family Poppins.

.form-block * {font-family:’Poppins’}

/* Slash with an Asterisk */

This is a super simple way to add notes to your code! The forward slash asterisk is a quick way of saying “hey browser, ignore this please” Here is an example of me adding a note both before the code and inline with the property

/* home page codes */
h2 strong {background: #e5f5f6 /* light blue color */}

( ) Parentheses

Parenthesis can be used in a few places in CSS. The two most common are pseudo elements and values. Pseudo elements can help you use code to specify “the second one of these” like this example that tells a browser to give a top border to the second page section.

.page-section:nth-child(2) {border-top: 5px solid #000}

Parenthesis are also used inside a property line for specific values, like when you use an RGB color code or a specific filter. This example makes an image 50% transparent and gives it a background of an RGBA color that will show through. I added it to the image below so you can see what a code like this would actually look like!

img {filter:opacity(50%); background: rgb(80, 189, 184)}

@ At symbol

This is a common symbol for media queries, which tell a browser to only apply a code change when a screen is a specific size. This code will change the size of heading 1 text to be 30px on any screen smaller than 640px in width.

@media only screen and (max-width: 640px){ h1 {font-size: 30px!important}}

# Hashtag or Pound Symbol

This symbol is used to specify a specific id for an object. Every item on a Squarespace site gets a unique block ID, and using this code you can tell a browser “when you see this specific object, make this style change” This is a great trick for anyone using a personal plan who wants to make a CSS change to one page or one item. You can add this to the custom CSS file for your whole site but only change one specific object at a time, no page header code injection or code block required 😎

[ ] Square Brackets

This one is not too common in CSS but you will use it sometimes. If you want to target a specific section or page of your site, you might end up using its data section id. This is way different (and less common) than a block id, but still important to know! if you are targeting a data section id, your code would look like this

[data-section-id=”123456”] {background: purple}

: Colon

One of the most common symbols in custom CSS, a colon is used for a few things. It separated properties and values, like this example here where the property is the padding and the value is the 5px

.sqs-block-button-element {padding: 5px}

You’ll also use it for pseudo elements, like making changes before or after an element, or adding a hover effect. This code gives a hover effect to active links; the background color of a text link will change to yellow on a hover

a:hover {background: yellow}

! Exclamation point

A must-know symbol for Squarespace CSS, this is used along with the word important to make sure a browser pays attention to your code. When you’re customizing a Squarespace site, you’re going to overwrite the code that’s already created by your style guide. Sometimes you’ll have to tell the browser “this one is important” by literally labeling it important. This code will change the background color of a button to purple no matter what other codes a browser might see.

.sqs-block-button-element {background: purple!important}

codecustom codecss for squarespace