How to Learn CSS Using the Inspect Element Tool
I recently shared some information on what is possibly my favorite tool when working with websites; we're talking about CSS of course! From customizing typography to changing the color and spacing of your website design, CSS is your gal when it comes to customizations.
Although it can seem intimidating at first, I aim to prove otherwise; with just a little bit of patience, an ounce of practice, and some motivational words of wisdom from yours truly, you'll be comfortable making stylistic changes to your website without the need for a developer in no time at all. (Psst! In case you missed it, you can catch up on our Introduction to CSS for Bloggers here.)
While you can spend a lot of time memorizing all of the CSS rules and selectors through textbooks or online tutorials, I personally find that the easiest way to learn things is by doing. Today I’m going to show you how to use the Inspect Element development tool in your browser to view and sample real-time CSS updates on your website. This powerful (and free!) function found in most web browsers is you secret ticket to getting behind the alphabet soup and taking control of your own web design!
How it works
Most modern browsers (Chrome, Firefox, Safari) offer the ability to inspect elements, however they may look a bit different than the screenshots here; I’ll be using Google Chrome for my examples as it just happens to be my browser of choice.
To begin, simply right-click the element you want to inspect and click Inspect. The developer tools window should open right away. This window gives us access to a number of things including the full HTML markup of the site, any errors the browser encounters, and of course the styles being applied to the current page (this is what we're after!)
How to Use Inspect Element to view current website styles
By inspecting the site title of the Parker Theme for example, we can see that the current font-family being used is Playfair Display. This is a handy trick if you want to see what fonts or colors are being used on an element without digging through your style.css stylesheet.
Have you ever seen a website design you absolutely loved, and wished you knew how they made it happen? That’s right, you can use the inspect element tool to spy on any website, not just your own!
How to Use Inspect Element to live preview CSS updates
When I was first learning CSS, my biggest fear was changing something small that would inadvertently break the entire site. The site would go down, our visitors would see us as total amateurs, Brittni would yell at me, and - well, you get the idea. Yes, I was certainly being dramatic and the reality never really panned out how I imagined it in my head, partly because I now use test sites for all of our work (a topic worthy of its own post no less), but also because I tested out all of my CSS changes using the Inspect Element tools before committing them to my site.
For example, let’s change the font to Montserrat as well as make a few other changes to the typography using the CSS below:
font-family: montserrat; text-transform: uppercase; letter-spacing: 10px;
That's right - you can use the Inspect Element tool to experiment with your CSS to your heart's content. None of the changes you make in the browser are saved to the actual site files, so experiment, break things and simply hit command + R to refresh the page to it's original state. It's the perfect sandbox :)
Once you’re happy with the changes, you can simply copy and paste the CSS into your theme. If you’re using a Station Seven theme, there is a Custom CSS box under Appearance > Customize that you can paste the code into that will be safe for theme updates. Alternatively, Jetpack offers a Custom CSS functionality to make any changes, or you can use a child theme to keep all of your changes separate from the theme source files.
How to Test Mobile Devices
If you're at all like Brittni and I (or anyone between the ages of 10-45), you probably live on your phone. With Google search now penalizing sites that aren't optimized for small devices, mobile testing your design is more important than ever these days. Chances are you don't have a drawer full of all the latest smart phones (if you do that's kinda weird, but hey we're not judging anyone here...), especially now that they come in plus size, nano size, retina and everything in between. You're in luck; Google's developer tools allow you to see at a glance how your site will look on all the latest devices, plus most devices from years past.
To access mobile view (or Device Mode Mobile Emulation as Google calls it), click on the little phone icon at the top of the development pane; you can then select your desired device from the dropdown menu at the top of the screen. You will want to quickly refresh your page to ensure that everything resizes properly. Click on the "Portrait" button to simulate a device rotation as well, if you're into that kinda thing.
The mobile emulation is actually quite effective at simulating mobile devices, and is a much faster alternative than pulling out your phone to quickly test some layout changes. Do keep in mind though that it is always best to check on the actual hardware, as you will find that it's not always a 100% accurate representation. More details on the features of mobile emulation (as well as a deeper explanation of its limitations) can be found in Google's own documentation here.
That’s just a little taste of the cool stuff you can do with CSS, and getting comfortable with the Inspect Element tool is a great first step to taking control of your theme’s styles. The ability to live preview any changes you are after is so liberating, not to mention the peace of mind that comes with knowing you won't destroy all your hard work with an errant typo. Whether you use WordPress, SquareSpace, Shopify, Blogger or otherwise, being able to work with CSS will open up a whole new world of customization to you that a panel full of controls can only dream about.
Have you worked with the Inspect Element or other developer tools? Have you found it helpful in working with CSS? Share your thoughts and any other useful tidbits in the comments below!