How to Add Custom CSS HTML and JS on Squarespace

Summary

This video tutorial provides a comprehensive guide on adding custom CSS, HTML, and JavaScript to a Squarespace website. It covers how to apply styles globally across all pages or individually for specific ones, using the design settings and advanced page settings. Viewers learn how to embed external content, like YouTube videos, and how to insert custom scripts for enhanced functionality. The tutorial emphasizes the importance of using code injection for site-wide changes and encourages viewers to reach out with questions or requests for further tutorials.

Takeaways

• 😀 You can add custom CSS, HTML, and JavaScript to your Squarespace website.
• 🖌️ To apply CSS site-wide, go to Design > Custom CSS and enter your styles.
• 📋 For specific page CSS, navigate to the page settings, then Advanced Settings to inject code.
• 🎨 Use RGBA color values to add transparency to background colors in CSS.
• 🔍 The web developer tools are essential for inspecting elements and generating CSS.
• 📺 To embed HTML content, use the Code Block feature on your page.
• 📥 You can easily embed content from platforms like YouTube by copying the embed code.
• ⚙️ For adding JavaScript to a page, use the HTML tags within the Code Block.
• 🔗 You can include external JavaScript libraries by adding the script tags in the code injection settings.
• 📑 The Code Injection feature allows you to add code to the header or footer for all pages, but is only available on Business and Commerce plans.

Q & A

What is the main purpose of the video?

The video demonstrates how to add custom CSS, HTML, and JavaScript to a Squarespace website.

How can you apply CSS changes to all pages on a Squarespace site?

To apply CSS changes site-wide, go to Design > Custom CSS and paste the CSS code there.

What is the significance of using RGBA for background color?

Using RGBA allows you to set a background color with transparency, enhancing the visual appeal of your site.

How do you add CSS to a specific page?

To add CSS to a specific page, access the page settings, go to Advanced Settings, and inject the CSS code at the top of the page using HTML style tags.

What method is used to embed HTML content like YouTube videos?

You can embed HTML content by editing the page and using the Code Block to paste the embed code.

What steps should you follow to add JavaScript to a specific page?

To add JavaScript to a specific page, use the Code Block, and enclose your JavaScript code within HTML script tags.

How can you include external JavaScript on your Squarespace site?

External JavaScript can be added to specific pages using the same method as internal JavaScript by linking to the external script within script tags.

What is the Code Injection feature, and who can access it?

The Code Injection feature allows you to add CSS, HTML, and JavaScript to all pages of your site. It is available only on business and commerce plans.

What should you do if you want to see changes made to the code?

After making changes to the code, you should save the changes and refresh the page to see the updates take effect.

What should viewers do if they have questions or want more tutorials?

Viewers are encouraged to reach out with any questions or suggestions for future tutorials.