Would your site look better if the logo was moved five pixels to the right or had a blue background? Would adding a border or shadows to the images in your featured posts make them pop more? Modern browsers like Firefox come with Web Developer Tools that allow you to inspect a site’s inner workings and make live edits, watching the results in real-time.
In this tutorial you’ll learn how to make use of Firefox’s Web Developer Tools to live-edit any site.
Note: This tutorial applies for most browsers, including Chrome, Opera and Safari.
Also read: Web Code Playground Tools You Should Try
Meet the Web Developer Tools
Firefox’s Web Developer Tools is a comprehensive set of tools, from displaying all DOM elements to being able to measure its speed. For this tutorial you only need the “Inspector” and “Style Editor” tools.
Fire up Firefox and visit any/your site. From Firefox’s hamburger menu (on the top right by default), choose “Web Developer -> Style Editor” or press the Shift + F7 combination on your keyboard.
Firefox’s Web Developer panel will appear on one side of its window – usually at the bottom part. You can change its position by clicking on the three-dots button on the top right of the panel and choosing “Dock to Right/Left” or “Separate Window.”
Note: This tutorial is not showing you how to code HTML and CSS. You can learn the basics here.
Inspecting the element
To be able to affect how an element looks, you have to be able to identify it. Click on the very first button on its toolbar or press Ctrl + Shift + C on your keyboard to enable the element-picker mode.
Move your mouse around the site to see different elements of the webpage highlighted. Next to them you will see their primary identifier hovering in a pop-up.
When you click on an element, it will be selected in the Inspector tab of the Developer Tools.
When you find the element you wish to tweak, right-click on its entry in the Developer Tools Inspector and select from the pop-up window that appears – “Copy -> CSS Selector.”
Also read: 5 of the Best Firefox Quantum Add-ons for Web Developers
Start Your Live Edit
With your element’s CSS Selector copied to the clipboard, move back to the Style Editor tab in the Developer Tools window. Click on the “+” button on the top left to “Create and append a new stylesheet to the document.”
Paste your CSS Selector inside the new, blank stylesheet. Add a space, followed by a set of opening and closing curly brackets.
In CSS, an element’s looks is defined by first “targeting it” using an identifier like that CSS Selector, then adding some rules that affect its appearance, grouped inside curly brackets. Everything placed between the opening and closing curly brackets affects the “targeted element.”
For example, if you add the rule below:
display: none;
This will hide from view the element where it is used. It is probably the easiest way to know that you’re targeting the correct element on your page. If it disappears, it was, indeed, the one you want, and you can delete this rule to try out others. If it didn’t disappear, it’s time to go back to the Inspector and select something different.
We won’t be showing you how to code CSS here, but you can play around with some of the popular rules like:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
You will notice that the site’s element changes as you add rules to the CSS stylesheet.
As a closing note, remember that nothing is saved. If you like how your tweaks look, copy your code somewhere – in a TXT file or your favorite note-taking application – so that you or a designer/developer will be able to add it to your sites’s stylesheet to make the changes permanent. If you need to learn about CSS, check out some online games to help you master the skill.
Subscribe to our newsletter!
Our latest tutorials delivered straight to your inbox
Sign up for all newsletters.
By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time. Subscribe
Odysseas Kourafalos
OK’s real life started at around 10, when he got his first computer – a Commodore 128. Since then, he’s been melting keycaps by typing 24/7, trying to spread The Word Of Tech to anyone interested enough to listen. Or, rather, read.
Comments are closed