Using “Inspect Element” to Adjust Your Website’s Look

You know the beginning of Raiders of the Lost Ark where an adventurous and sweaty Indiana Jones risks being crushed by an enormous, out of control boulder after he nabs a golden statue from the center of an ancient Peruvian temple?

Well, this post isn’t going to be nearly that dangerous. Unless you’re reading this inside a booby-trapped South American temple, that is.

Hopefully, you’re not in that sort of precarious situation (and also, where are you getting the wi-fi from?).

However, this is somewhat advanced stuff. You may not need the daring that Indy has (or his sweet hat) to figure this stuff out, but it couldn’t hurt. Much like he always did, we’re going to be delving deep into the unknown depths of websites to figure out how they work and how we can craft them into our own unique golden idols.

Don’t let the learning curve here keep you from investigating the underlying code of your website (and others), but remember that you’ll need to be patient and think of this like a treasure hunt. Website code, or any programming code for that matter, can be a challenge to understand. After all, it is a completely new language to learn.

Before we start adventuring, go to the W3 Schools’ website and have it open in the background. They’re a wonderful resource for the sort of thing.

How to inspect your elements

The first step to learning how to change the appearance of your website is an easy one. Any modern browser you come across will be able to do it. I’ll be focusing on Chrome, Firefox, and Safari here.

Chrome and Firefox — These are easy. Right click anywhere on a web page and click on the Inspect Element option to pull up the Developer Tools window.

Safari — You’ll need to turn on the Developer options first. In the menu bar, go to Safari -> Preferences. In the Preferences window, click on the Advanced tab and check the box marked Show Develop menu in menu bar. After turning it on, you’ll be able to right click on a web page and select Inspect Element.

Developer Tools

The Developer Tools window will vary in appearance and location between browsers, but they’re all essentially the same thing. What’s displayed here is what makes up a website. All the HTML, CSS, Scripts, and so on are available for viewing.

Fair warning, it’s all going to look like a mess of gobbledygook. Remember, you’re dealing with a computer here and computers don’t speak an easily understandable language.

Don’t think of the code as a mountain you’re going to need to climb. Be like Indy and imagine you’re going on a treasure hunt instead. There will be moments of confusion, but there will also be little clues and landmarks you can use to move forward and orient yourself.

We’re going to want to navigate to the Elements tab in whatever Developer Tools window we’re in. The Elements tab displays the site’s HTML. This code is the skeleton of a website. All the content and the order everything appears on a page is in here, as well as all the connections to the CSS documents (more about that in a little bit).

Feel free to scroll through the code here. You’ll see lines upon lines of text, much of it inscrutable but some of it may pop out to you. For instance, scroll down a ways and toggle down the triangle that says <div class="Site loaded" ... > This is currently the main content of the Squarespace website. Here you’ll notice familiar words like “Header” and “Footer.” These are exactly what they describe—the header and footer of the website.

If you want to adjust the appearance of things in your site’s header or footer, this is where you want to look first. Easy, right?

Finding the Elements to Change

If you’re feeling particularly daring (or if you have some time to kill), you can scan through these many lines of HTML code, toggling down sections, and find the exact spot you want to change.

The Developer Tools window helps by highlighting the portions of the website when your mouse hovers over the respective line of code. It’s pretty handy. Hover over the <header class="Header Header--top"> line and watch the header section of the website become highlighted.

There’s an even easier way of doing things, though. In the Developer Tools window in Chrome and Firefox, you’ll notice an icon that looks like a cursor hovering over a box with rounded corners. In Safari, search for an icon that looks like crosshairs.

Selecting that icon will allow you to choose a specific portion of a web page by clicking on it.

You’ll notice that elements of the page are highlighted when you hover over them and clicking on an element will navigate directly to that portion of the HTML code in the Developer Tools window.

Not so impossible now, right?

Time for some CSS

Now’s the perfect time to open up the W3 Schools’ site, navigate to the CSS section, and have it close at hand.

There’s a massive amount of creativity and potential that CSS can provide. You may find the only limitation it has is your imagination. By connecting CSS code to bits of HTML, you can design and position any element of your entire website.

With such open-ended possibilities, it can be easy to feel overwhelmed. I know I certainly was when I first started out with it. I still get stumped sometimes. Remind yourself to be patient.

In the Squarespace sidebar, we’re going to head over to Design -> Advanced -> Custom CSS. This is where all our bespoke code will live. All the following bits of code in this post will be written here.

I’ll focus on a particular aspect of my website for this post: my buttons.

Using the Inspect Element window, let’s find out the HTML class that Squarespace uses to connect their button elements to their CSS code.

Think of these elements like a Russian nesting (or Matryoshka) doll. Each individual element is held inside another related family of elements. We’re going to start with the outer container here, the one listed as .sqs-block-button.

The code will start like this…

.sqs-block-button {

}

From there, we’re going to drill down as deep into the HTML as we can until we hit the button we’re working with. We’ll add a space between the different HTML classes, signifying the separate but related classes…

.sqs-block-button .sqs-block-button--large {

}

We’ve just called the “Large Button.” Every bit of styling we add between the curly brackets will apply to this particular button style now.

I want to change the button’s background color, text color, and the border surrounding the button element. I’m also going to include the overriding !important tag and end each line with a closing semicolon...

.sqs-block-button .sqs-block-button--large {
  background-color: #FFF !important;
  color: #7193E0 !important
  border: 2px solid #7193E0 !important;
}

Great! We’ve now got a custom and appealing button on the site. This is going a long way toward jazzing things up.

There’s an issue, though. Whenever I hover over the button with my cursor, the button doesn’t have the sort of styling I want.

This is happening because a cursor hover is a completely separate event happening to that button. As such, it needs a separate bit of CSS added after the last bit of code, specifically for a hovering action…

.sqs-block-button .sqs-block-button--large:hover {
  background-color: #7193E0 !important;
  color: #FFF !important
  transition: 250ms !important;
}

Notice the :hover text after .sqs-block-button--large.

Bam! Now, when a cursor hovers over the button, the button swaps its background and text color. I included a transition tag to control how long the change takes, a quarter of a second in this case (as opposed to instantaneously).

This is a very small taste of what can be done with CSS. HTML is the foundation of everything on a website. Without it, there’d be no website at all. CSS, however, is what gives an unappealing HTML site its style. CSS is where a great amount of web design artistry takes place.

Without CSS, the Internet would be a drab place.

Your imagination is your greatest tool. Anyone can learn how CSS works and there are many resources available online that will give you the guidance you’re looking for. The biggest key to designing a website and working with custom CSS is to dream as big as you possibly can.

Happy coding, cats.