How To Use Custom CSS in a Squarespace Website

[@moon_spilling]

the color scheme in this video was perfect

[@thetrustedbrush]

dang girl, that was thorough! Your video and teaching style is super engaging and I can tell that you have done the work!

[@jenwebbcreates]

thank you for saying that, I appreciate it 🥹

[@journeybrown]

I’m a new a freelance web designer and I love your videos!

[@jenwebbcreates]

I'm so happy to hear that! let me know what other kinds of videos you'd be interested in 😊

[@RevelynMaeOnrejas]

Thank you! I love how you explain everything more power to you!

[@qristavitavian8797]

So much goes into making a website even the smallest details!

[@tanyagl5776]

OMG I literally fell in love with the way u talk 🙌 Thank you so mush for explaining this hard thing in sooooooo easy and understandable way

[@jenwebbcreates]

that makes me so happy, I'm glad you found it helpful 😊

[@HH-zb5ul]

Oh ! l love css but it need practice , Awesome video 😊 love that ❤

[@MelisaMerine]

Wow! This video and your clear instructions were very impressive! It was extremely helpful!! Thank you so much!!! I'm now a subscriber!

[@jenwebbcreates]

Glad it was helpful! 😊 thank you for subscribing!

[@dre6289]

That was very good. Keep going deep on squarespace!

[@jenwebbcreates]

thank you I definitely will 😊

[@andreamolinares7341]

I loved the way you explained it!

[@jenwebbcreates]

thank you that's encouraging!

[@ashleyk3745]

You can make a whole video based on the lightening round. I'm hooked! Subscribed! Would like to know more about animations :)

[@jenwebbcreates]

ah thank you! I'll add animations to the list of videos to make, thanks for the suggestion 😊

[@gouravjoshi953]

Is there any built-in support or workaround available within Squarespace to enable the use of SCSS (Sassy CSS) for more efficient CSS management and preprocessing?

[@jenwebbcreates]

I don't personally use scss, I think I played around with it once and it was very cool but I'm not too familiar with it. I googled it though and one of the top results says this: "Squarespace supports Less natively so if you're going to style with Sass, you can use something like Compass or Grunt to compile your code into a CSS file that Squarespace can use." or maybe if you use codepen, you can have it convert your scss into css to use in squarespace. not exactly the best solution, it'd be nice if you could just put the scss code directly in squarespace.

[@phm.ththytrang]

finally, thanks so much.

[@noemiesa8076]

Hi Jen! Thanks for this tutorial. I searched for a long time for a list of all the other text types like quotes, forms, button types, ... and classes but couldn't find it. Maybe you have a link to share about this?

[@jenwebbcreates]

hi! are you talking about the classes squarespace uses for each of the text elements? I don't have a list of classes that I use, I usually just look for it in the inspector panel in the web browser (around 6:45 in this video). It's a little bit of work to find the right class, you have to play around with the css to make sure you're using the right one. Or sometimes you can just google it for specific elements, like if you're trying to find the selector to use for quote elements you can google "squarespace quote css selector"

[@grainvisions]

Youre a wizard, seriously. Would it be possible for you to make a course to Skillshare or even here, breaking down your own website? It looks great and as someone who has no idea how to code, i'd really need a deep dive. Appreciate you!

[@jenwebbcreates]

ah thank you that is so encouraging! I've always wanted to make courses on Skillshare, I love that platform and learned so much on it but I've always felt like I'm not enough of an expert to teach yet. But your comment is encouraging. I do want to make a video on here breaking down my website and some of the other websites I've worked on in more detail, so watch out for those videos in the future 😊

[@grainvisions]

@@jenwebbcreates If you know more than another person, youre qualified to teach 😊 Clearly you know more than beginners like me who would benefit from someone who knows the basics. Another thing i was wondering, is there any websites from where to find copy paste - codes that could be used or do you have such file yourself where you keep some codes? Would it be possible to get that kind of file somewhere?

[@taunado]

@@jenwebbcreates Many teachers selling courses aren't really teachers, they're entrepreneurs. If the content is good then you're good.

[@jenwebbcreates]

@@grainvisions there are plugin sites you can buy code snippets from, some of them are free. try searching for 'ghost plugins' or 'will myers plugins'. maybe in the future I will add some code snippets to my own website once I have time to get that set up 😊

[@randomyogi]

CSS seems so daunting but it’s now starting to make sense 😅

[@CharlesNwankwo-hn1ff]

Thank you, Jen Webb for your help! I have a question - is it possible to use the image block in a code block? My goal is to use a code block to create HTML, but I want to use the Squarespace image block to upload pictures and display them in the code block. I don't want to manually upload images to the files section in the CSS tab and attach the link manually to Squarespace every time.

[@jenwebbcreates]

Hi Charles, glad you found it helpful! I don't think you can add an image block within a code block, I suppose you could try to position the image block on top of the code block but I'm not sure if that's what you want. Whenever I want to add an image to a code block I upload them to the files section and then use an tag in the html. But I only do that when I have to, I'd try to use CSS and image blocks instead if possible.

[@CharlesNwankwo-hn1ff]

@@jenwebbcreates Thank Youuuu, i guess ill just do it that way then, On another note! a new feature just dropped, the Block pinning feature. it has a lot of potential for scroll effects. would love to see what creative ideas you come up with that feature!

[@salauddin3693]

can we this custom css in squarespace devloper mode?

[@CharlesNwankwo-hn1ff]

Have you tried using code generated from figma into squarespace?

[@jenwebbcreates]

I haven't tried this! but that's a good tip for figuring out which CSS properties to use

[@CharlesNwankwo-hn1ff]

@@jenwebbcreates I tried using code generated for CSS and HTML, but had difficulty placing them correctly on Squarespace. Despite searching on KZbin, I couldn't find any tutorials on how to transfer designs from Figma to Squarespace using code plugins such as Anima or Figma to HTML. is it possible if you could be the first to do something on that 🥺🥺

[@PeterTrainer]

🫶 thanks 😘