Click the Edit icon at the top of the webpage.

Click on the code block.

Click on the edit icon, which looks like a pencil.

A window will pop up. This pop-up contains the code. Any changes made in this pop-up will change the items displayed on the webpage.

This is to avoid conflict between multiple code blocks that have the same name.

For example, if you use “box1” to make a red box and then also make “box1” and try to make it green, the computer will go with the “box1” that it most recently read. Either both boxes will be red or both will be green. Avoid this by using unique names (e.g., box1red and box1green).

type of item, then number, then description, then nickname for that location/webpage.

For example, f1headerhome might be used for CSS styling for the first type of font that is for a header on the Home page.

l2containeraboutus might be used for a level 2 container on the About Us page.

1. Open the pop-up to edit the code above.

2. Look for the text. Text is often within p tags that have a class to describe styling. In the code above, the text is between <p class="f1paragraph"></p>.

Single spaces will be reflected as single spaces. Additional spaces are ignored. This is why you might see text written as multiple lines in the code that does not appear with line breaks on the webpage. Multiple lines are used within the code to keep everything neat and easy to read.

Use <br> to create a line break.

3. Okay, now try typing something right before the lorem ipsum but still within the p tags. You should see it appear on the webpage.

4. Click outside the pop-up. Click Save in the upper lefthand corner of this webpage. That’s it!

1. Open the pop-up to edit the code above.

2. Navigate to the CSS section (between the <style> tags).

3. Look for the selector that describes the target text.

If you don’t know which selector, scroll down to the actual text in the HTML section below and note the class identified within the <p> tags. In the example above, the only selector is f1paragraph.

4. Make changes to the properties and property values. See https://www.w3schools.com/css/css_text.asp for ideas. Suggestions are:

a. font-family: Try changing this to times or helvetica. See https://www.w3schools.com/css/css_font.asp for ideas.

b. color: Color can be input in one of several ways. See https://www.w3schools.com/css/css_colors.asp for more information. For now, just try using a preset color like red, yellow, orange, green, blue, or black.

c. text-align: This one is pretty straightforward. Try center, left, right, or justify.

d. Try adding a new property. Let’s try background color. Go to the last item before the close curly bracket } and hit enter to create a new line. Type in “background-color: red;”. You should see a red background appear behind your text. To remove this, simply hit background until whatever you typed it gone.

5. Click outside the pop-up. Click Save in the upper lefthand corner of this webpage. That’s it!

1. Find the main Squarespace menu on the left. You might have to click “Website” and then “Home” in the upper lefthand corner to get there (menu not visible when in editing mode.).

2. Go to Asset Library.

3. Scroll or use the search function to find the image you want.

4. Find the File Details option and click on it. This is available by hovering over the image and clicking the three dots in the upper righthand corner of the image.

5. Within File Details, right click on the image. Click “Open Image in New Tab”

6. Go to the new tab that now should contain a full size version of the image. From here you can either copy the URL as it is or remove additional information. I have found that removing the additional information seems to work better, but I think either way will work.

a. Copy as-is: Click in the address bar until you see the URL as it starts with “https://”. Select the entire link. Copy.

b. Remove additional information: The image URL should look something like https://images.squarespace-cdn.com/content/BUNCHOFLETTERSANDNUMBERS.jpeg. We don’t really need anything tacked on the end, like “?content-type=image%2Fjpeg” or “format=200”…Click in the address bar and hit backspace until that stuff is gone and your link ends in just .jpeg. Hit enter again to make sure your image link still loads the correct image. Now, follow the steps above in Copy as-is.

7. Your image is now copied. Either paste it somewhere for safe keeping or go directly to your code.

8. Get back to your pages by clicking Back, Home, Website, Pages.

1. Open the pop-up to edit the code above.

2. Review the code. Note that three selectors are created in the CSS and used in the HTML.

a. l1containerforimageexample: A main container for all of the content within this code. The background is red so it can easily be seen.

b. l2containerforimageexample: A container to house other elements. In this case, the container houses an image within <img> image tags.

c. t1blockforimageexample: This is a container also, but called a block to distinguish how it is being used. This block doesn’t contain anything within it. This is the selector we’ll be looking at for this example.

3. Identify the selector that contains a background image. In this case, it is t1blockforimageexample. You can tell it has a background image because the CSS includes “background-image” with a URL source within quotes. The URL is what you are going to change.

4. Take your copied URL for the image you want and paste it between the quotes.

5. Click outside the pop-up. Click Save in the upper lefthand corner of this webpage. That’s it!

1. Open the pop-up to edit the code above.

2. Review the code. Note that three selectors are created in the CSS and used in the HTML.

a. l1containerforimageexample: A main container for all of the content within this code. The background is red so it can easily be seen.

b. l2containerforimageexample: A container to house other elements. In this case, the container houses an image within <img> image tags. This is the selector we’ll be looking at for this example.

c. t1blockforimageexample: This is a container also, but called a block to distinguish how it is being used. This block doesn’t contain anything within it.

3. Within the HTML, locate your image within <img>. In this case, l2containerforimageexample is the container and within this container is the image.

See <img> and the contents of this tag. src stands for source. The URL for your image is within quotes after src. This URL within quotes after src is the URL you are going to change.

4. Take your copied URL for the image you want and paste it between the quotes.

5. Click outside the pop-up. Click Save in the upper lefthand corner of this webpage. That’s it!

You swapped the image URL, careful to not add or delete anything, but the image doesn’t look like it should.

Double check that the URL is correct by pasting it into a new tab. If the image doesn’t show up, you need to recopy it from the Asset Library.

Double check that you didn’t delete or alter anything in the code. This might take a second, but typos are easy to make and easy to overlook.

Here are some things you can try changing.

—> background-position: Changes where the image is centered. https://www.w3schools.com/cssref/pr_background-position.php

—> background-size: Basically changes the zoom and stretch of the image. https://www.w3schools.com/cssref/css3_pr_background-size.php

Unless you are very comfortable and familiar with the code, I do not recommend altering the width, height, or flex basis of the containers for these images. Doing so could cause cascading issues with how the overall item is displayed on the webpage.