Working with containers

Click here to download the transcript as a PDF

Click here to download the transcript as a VTT

THIS TRANSCRIPT WAS AUTOMATICALLY GENERATED BY VIMEO

Beyond the basics working with containers.

Here's what you're going to learn in this lesson: You'll learn how to identify containers in your Squarespace website.

We'll be talking about border and outline codes and the big differences between the two.

Then you'll learn about padding codes that adjust the size of your content and margin codes that adjust the location.

Your Squarespace website is made up of different containers. I want you to think about every aspect of a page as having a container with content inside of it. Your header has the container of your site title and your menu links and elements.

The pages are containers of page sections. The page sections are containers of content. Even a content block is a container of text and images and more.

In this example, I have an accordion. You'll notice that in an accordion block, it's a container of a title, a description, an icon that's inside the container of a page section that's inside the container of a page. You get the idea.

Now, when you're editing your Squarespace website, you'll see this container edge as a bright blue outline.

Here's a quick screenshot that shows that clearly defined edge of a page, section and the accordion block container.

Now, when we add a border to content, it'll be placed inside the container between the content and the edge.

When we add an outline to content, it'll be placed outside the container.

Now let me go back to that border slide to show you the example here.

Content inside this container, it's gonna move to accommodate a larger border, but the outline doesn't adjust the content inside the container.

Pretty interesting right?

Now, borders themselves, they can have a specific width style color, and it can be unique for each side.

I wanted to show you this example here to explain the concept of a cascading style sheet. Your last line of code will be the last that's applied, so if you want to have a unique border on the left side and on the bottom, check out this second code.

In my screenshot here, I've said, give this whole thing a border that's 30 PX and it's solid and it's red, but actually change the left border to blue.

And you know what? Make the bottom border 10 PX dotted and green and check it out.

We have a completely different side. The way the computer browser reads this code is it'll read line one to identify what it needs to change.

Then it'll read line two and it'll apply that property and value change.

Then it reads line three and says, oh wait, let's change this one.

Then it reads line four and said, wait, we've got one more change to make.

It's cascading and it will be applied in order.

Outline codes, they're placed on the outside edge and they have a specific width style of color, but they can't be unique for each side.

Like a border code, borders are placed inside a container edge, and again, they can adjust the content inside that container because it's trying to fit.

Outlines are placed outside the edge of a container, but they aren't as customizable as a border.

A large border width can change the size of an object and a large outline width that can overlap other content.

You'll find some additional border and outline code information in the guide.

For this lesson. I have an outline of the different styles there and talk a little bit about border radius.

Lots of fun stuff to learn, but before you grab that guide, let's talk about padding and margin.

Padding adjusts the distance between the edge and the content inside the container.

Because of this, they can alter the size of an object.

In this example, I have a button with padding five PX at the top, then padding 30 PX in the middle, then padding right 30 px on the bottom.

Notice the distance of the edge changes between the text and the edge of that button, and notice that you can change all sides at once or specify a unique side.

Now here's where it gets fascinating to me.

Margin is completely different. Margin adjusts the distance between the edge

of the container and other content on your site.

Margin codes alter the location of the object. Now just like padding, you can adjust all sides at once or specify a unique side.

In this example, I drew like a dashed line there, so you can see the buttons right up against the edge when it has a margin of zero, but if I say margin left 30, it's gonna scoot 30 pixels over to the right because I've added that margin on the left hand side.

Padding alters the size of the object and margin changes the location.

Now because margin changes the location, margin values can be negative, but padding values must always be positive.

Alrighty, your homework for this lesson. I have a nested container guide inside the resource guide for this lesson. I want you to review that so you can be really familiar with the concept of how these layered containers work inside Squarespace.

I want you to create a custom border code. Then I want you to use margins to place an image between page sections. Yes, that's a practice code inside your guide.

And then use padding and borders to turn your main navigation links into buttons. You can change anything in your Squarespace website into a button, and the practice code for this lesson will teach you how.

So download the resource guide for this lesson on working with containers, and when you're ready, I'll see you in the next video.