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;

enter image description here

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

enter image description here

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

Any idea what .css file manages the header background?

  • Chrome's inspector gives you the exact file.
    – fuxia
    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
    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? 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.


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
    It's most likely dynamically generated if it's being placed inline, so it's an option in his theme or perhaps the customizer. Jan 6, 2021 at 3:03

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.

  • The answer to your question changes over time, as you make changes to the site - so a function might include inline styles or a line number might changes as stylesheets are edited. Inline means exactly that, and remember that style rules can also be repeated and overrule each other.
    – Q Studio
    Jan 8, 2021 at 20:07
  • Thank you @QStudio but my question is: how to find out through Chrome/FireFox Inspector inspector on what .css file the line is recorded. Jan 8, 2021 at 20:43
  • That's my point - the inspector usually tells the truth, you just need to learn how to read it - and in cases where you find a difference, you need to learn why - perhaps you were using customizer and it was adding inline, then once saved it was added to your theme style.css - or perhaps not - you would need to give more information about the original question to get a more accurate answer - the bigger question about Inspector usage has been answered, I think.
    – Q Studio
    Jan 8, 2021 at 20:54
  • With the Inspector - you right click on an element and the tools tells you where it took style rules from to style the element - if you think it is wrong, you need to report a bug, if instead you accept the answer, you need to learn how to interpret the information given - that's true of any interpretive tool and why skills take time and experience to gain.
    – Q Studio
    Jan 8, 2021 at 20:58
  • 1
    Last comment on this - I updated the ticket to show you how Inspector was giving the correct information, as it said the selector #masthead was on line 25 of your html document - inside an inline <style> block, as I said in my answer.
    – Q Studio
    Jan 9, 2021 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.