Which line of CSS I have to edit? Web code inspector in action

The most popular support question is: "Which line of CSS I have to edit to change the appearance of (...)". Several years ago, CSS/HTML editors were the most useful web developer tools. Now, I think much more useful is the web code debugger built in every modern browser, such as, Firefox, Safari, Chrome, Brave and even MS Edge. The code inspector allows you to examine, modify (simulate changes), and debug HTML, CSS, and JavaScript of a webpage. If you are looking for information on using the web developer tools available in your browser, you've come to the right place.

How to run the browser's web developer tool?

First thing first. The method to use the developer tool varies from browser to browser. Here we start with Google Chrome. 

• For Chrome, click Menu > More Tools > Developer Tools or use the equivalent keyboard shortcut, or
• With an element selected: Right-click an element on a web page and select "Inspect"

The Inspector will appear at the bottom of the browser window, like the screenshot below. 

Screenshot: Google Chrome developer tools.

When opened, it pops up and gets docked to the bottom of the current browser window or in separate window (it depends on the settings and the browser).

View and inspect the elements that make up the DOM of a webpage. The rendered site HTML is visible and fully editable on the left and details about the webpage’s nodes, styles, and layers are available in the sidebar on the right. Below is a video regarding Firefox dev tools. 

For Chrome, you can follow the official documentation. Keep reading this article to learn the core stuff faster. 

How to use the web developer tools?

The toolbar is usually located at the bottom of the screen were you can control the inspector. Your selected element will be highlighted and other elements on the page will be dimmed. Editing allows you to preview web content output with adjustments to HTML, CSS, and JavaScript code. It helps you inspect all of the resources making development more efficient and what is the most important, tweak styles using the most common CSS properties.

You can edit any HTML element and edit CSS rules, both with CSS blocks and visually.

Screenshot: Firefox developer tools.

If you click on a declaration or a selector in the Rules view, you can edit it and see the results immediately. You can also choose the different existing properties and values, and start editing them by pressing Enter or Mouse click. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). As you start typing a property name, you'll see a list of autocomplete suggestions.

You can accept the current suggestion or move through the list. The default choice is the most common property that starts with the letters you've typed. For example, here the user has typed "c" and the default choice is "color" (screenshot above). If you enter an invalid value for a property while editing it, or an unknown property name or value, a yellow alert icon will appear in that line. The web inspector also includes a number of specialized tools for working with particular CSS features, such as colors, fonts, and animations. 

You can also edit CSS rules in stylesheet files and edit JavaScript in script files (screenshot below).

Screenshot: Brave developer tools.

Any changes you make are temporary: reloading the page will restore the original styling.

Warning! Changes made in the developer tool are NOT saved inside your template, component, module CSS/JS files. You have to copy changed lines of code and use inside your custom code file(s).

Most browsers have also built-in options to emulate mobile devices (views) in your browser. The Responsive Design Mode provides a simple interface for quickly previewing your webpage across various screen sizes, orientations, and resolutions.  Very handy tool for mobile developments.

Screenshot: Safari responsive design mode.

I know what I need to change, what's now?

If you know what CSS lines you should override to implement the desired change, you have to use custom code inside your template. If you have installed, and set as default Helix3 or Helix Ultimate template, we recommend to use custom.css file to insert all major changes and add new lines:
templates\shaper_NAME\css\custom.css

Yes, first you have to create that new file from Joomla administrator or via FTP.  More detailed information you will find in Helix Manual section.
Using this method, you can control the design of your whole site from one place.

Screenshot: How to use custom CSS code inside Helix Ultimate.

For an example, if all addons titles should be red, you can change it from a single place, not in each module setting separately. The same you can do for addon styles from SP Page Builder and for any other component. The main rule is common.

Alternative dev browser

Screenshot: Firefox Developer Edition.

Mozilla has created Firefox Developer Edition, a browser with built-in development tools, a version tailored for developers, featuring the latest Firefox features and experimental developer tools. It includes tools built specifically for building and designing with CSS Grid. These tools allow you to visualize the grid, display associated area names, preview transformations on the grid and much more. 

Final thoughts

I am not magician (or not yet), since the beginning I use that tool every single day. Regardless if you are a new or even experienced Joomla user, you’ll greatly benefit from making use of the web developer tools built in your browser. They are free, really powerful, and provide a playground to learn, speculate, and experiment with new styles. Almost all of them provide a wide array of tools for creating, debugging and performance monitoring. Explaining all the features is beyond the scope of this article. However, we hope that the introduction to the above mentioned tools help you in your daily Joomla development chores.