Styling Separate Squarespace 7.1 Sections with CSS
Squarespace 7.1 boasts a variety of new tools to help designers construct beautiful webpages, but sometimes custom code is needed to make a webpage truly unique.
I spend a lot of my time with code (cool, I know) and I’m always looking to add a distinct flourish to websites with CSS, so sometimes I need to drill the styles section by section so that what I’m adding doesn’t get applied to the whole page, or even the whole site (heaven forbid).
So load up the website you want to edit and let’s jump right into it!
Most browsers will have inbuilt functionality that allow their user to inspect various HTML elements on a webpage; this is known as the “DOM Inspector” and can be found by right-clicking and selecting “Inspect”.
The DOM Inspector may seem complicated at first, but after you’ve had a little poke around and found what you’re looking for you’ll realise how easy it is to use.
To make things easier, we’ll only need to focus on the “Element Selector”, which is the first icon on the top left of the DOM Inspector.
If you click on this icon and then move your mouse over the element you want to inspect, you’ll see that it highlights the element. If you then click on that element, it’s place in the website code is highlighted under the “Elements” tab, as well as its associated CSS details.
What we are after is the <section> tag; more specifically the “data-section-id“ attribute with the actual ID.
Double click the unique ID to highlight it (for reference that’s the value in the image above starting with “5e5f…”) and then copy it.
We’ll then take that value and paste it into this CSS code:
.page-section[data-section-id="THE UNIQUE ID GOES HERE"]
And Voila! You can start styling elements within that section without effecting others on the page!
For example, if you want to style all of the <h3> tags in a particular section, you could use this code:
.page-section[data-section-id="THE UNIQUE ID GOES HERE"] h2{
font-size: 30px;
}I hope you’ve found this useful! :)
