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?

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?

• customization
• themes
• css
• custom-background

• Chrome's inspector gives you the exact file. – fuxia ♦ Commented Jan 5, 2021 at 20:17
• In this case, it's not in a file - according to inspector - it's inline in the HTML document. – Q Studio Commented Jan 6, 2021 at 8:36
• @fuxia, can you please show us how to find the .css linked to a specific command in the inspector? – Francesco Mantovani Commented Jan 6, 2021 at 9:12

2 Answers 2

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.

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

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.