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.
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.”
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: 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: 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.
