FireFox Inspector :: find CSS file related to <div>

I'm creating my new website and I would like to change the background colour. Through FireFox Inspector I nailed the CSS line that manages the colour, it's background-color: #fff;

I now have to change that #fff to #f3f3f3 but I cannot find the right .css file. The .css files are 4:

  • block-editor-style.css
  • editor-style.css
  • theme-help.css
  • customizer-style.css

Inside those files I find several background-color: #fff; but none manages that header background.

Any idea what .css file manages the header background?

Topic custom-background css customization themes Wordpress

Category Web

1
answered at

The inspector says "inline" which indicates that the CSS is not in a separate file, but instead is inside the HTML itself, probably in a <style> block at line 39 ( near the top ) - search the whole page source code for #masthead and you will probably find it.

If you want to know how it is being added to the theme HTML, you will need to search the entire project codebase for a unique string - again #masthead might bring good results.

Update:

Added grab of the source code of your website, showing line 25 where you will find the #masthead CSS selector, as described by Inspector - it is much further to the right - but the scroll bar is hidden, as the css is formatted into long lines.

enter image description here

1
answered at

In fact it was at line 1586 in the style.css file:

enter image description here

but a question remains: how to use Chrome/FireFox Inspector to find the file in which we have to edit the .css?

We were all wrong here and my question received 3 thumbs up, it means there is a general lack of knowledge around this topic. Any reply is welcome.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.