Identifying Code In Squarespace - Is It CSS, HTML Or Javascript?

Abi Bacon

Squarespace Developer based in Southampton, UK

Are you wanting to add some Custom Code to your Squarespace Website? Perhaps you’ve taken over control of an existing Squarespace site and want to familiarise yourself with the code already added.

There’s three main coding languages that you might come across when installing plugins or adding some custom code to your site, these are HTML, CSS and JavaScript.

My aim is to introduce you to each of these so that you can identify them.

HTML

What Is HTML?

HTML stands for Hyper Text Markup Language and creates the main structure of your website. It uses tags to create content, defining elements such as headings, paragraphs, links, and images.

Each time you add a Block within the Squarespace Drag & Drop editor, Squarespace automatically inserts the relevant HTML into your site.

Whilst that code isn’t visible to you (unless you jump into the web inspector), you may also come across this in either the Code Injection Areas or within Code Blocks on your site if some additional code has been added. Equally, if you follow tutorials online to add additional components to your site you may come across HTML.

What Does HTML Look Like?

I mentioned above that HTML uses ‘Tags’, tags are enclosed in angle brackets (< >) and typically come in pairs: an opening tag and a closing tag, with the content nested between them. For example, <p> is an opening tag for a paragraph, and </p> is the corresponding closing tag.

This HTML snippet creates a division (<div>) element with the class attribute set to "example-content". Inside the division, there's a heading two element (<h2>) with the text, followed by a paragraph (<p>), and finally, a button (<button>). All of these elements are contained within the <div> element, meaning they are grouped together as part of the same section or block of content.

<div class="example-content">
  <h2>This is the heading of the copy</h2>
  <p>Your Paragraph would go here</p>
  <button>This is your button</button>
</div>

CSS

What Is CSS?

CSS (Cascading Style Sheets) is a coding language used to make websites look good. It's the "style" or "appearance" settings for web pages, allowing you to control things such as colours, fonts, layout, and spacing. By using CSS, you can make your website visually appealing.

What Does CSS Look Like?

In CSS, each rule consists of a selector, followed by one or more declarations. Each declaration includes a property and a value.

selector {
  property: value;
}

1. Selector: Selectors are what is used to select the element(s) to which the style will be applied. They can be HTML elements like <h1>, <p>, or <div>, class names (e.g., .example-class), IDs (e.g., #example-id), or other attributes.

2. Property: Properties are the styling attributes you want to change, such as color, font-size, margin, padding, etc. Each property describes a specific aspect of an element's appearance.

3. Value: Values are assigned to properties and define how the property should be styled. For example, if the property is font-size, the value could be 16px (16 pixels), 1.2em (120% of the current font size), or 2rem (twice the size of the root element's font size).

In the below CSS Snippet I’m assigning the font-size 1.2rem to the heading level two element within the div which contains the class ‘example-content’.

.example-content h2 {
  font-size: 1.2rem;
}

JavaScript

What Is JavaScript?

JavaScript is a high-level, programming language that is commonly used to create interactive effects within web browsers. It allows developers to add dynamic behavior to web pages, enabling features such as user interaction and content updates without needing to reload the entire page.

What Does Javascript Look Like?

JavaScript can be found between HTML <script> tags.

<script> </script>

The below code creates a variable and sets a value to it before outputting the value of the variable using console.log.

<script>
  var greeting = "Hello, world!";
  console.log(greeting);
</script>

You’ll likely come across functions within JavaScript and often these are used alongside an event listener such as “DOMContentLoaded”. In the below example the function, an output of ‘Document is fully loaded!’, will be run once the HTML has all been loaded on the page.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    console.log("Document is fully loaded!");
  });
</script>

---