Can't change element color and am terrible at using the browser inspector

[schwim]

Hi there everyone!

I’m trying very hard to use the browser’s (in my case, Firefox) inspector to help modify and fix my HTML code. The issue I’m having is that I’m not very good at it. I inspect elements and often, I can’t find the part of the css that’s controlling something.

Here’s an example: https://s-esx.com/topdown.html

And here’s the part I have tried to get the color info on:

When I look at the inspector, I see everything struck through and inherited from Bootstrap line 5.

So rather than edit bootstrap.min.css, I decided to create a class to override it so I created a class called h1welcome and added color: white to it in custom.css. In spite of this, the color didn’t change.

What am I doing wrong?

[coothead]

Hi there schwim,

try this perhaps…

.content-header h1,
.content-header h1 small {
    color: #fff;
 }

coothead

[Erik_J]

@schwim

When I look at the inspector, I see everything struck through and inherited from Bootstrap line 5.

A mini tut:

If you look closer at the css in the right pane, you’ll see at the top the selected element and beneath comes rules that are struck through, those are overridden (if you uncheck a later rule above, it would lose the strike through).

At the very top of the pane is the element itself, code added there is like putting a style attribute in the html, it only affects that particular element.

Depending on browser there can also be heading-bars that says “Inherited from…” to help navigate the rules.

Another help to navigate the code is to hover the html in the left pane and see what element is highlighted on the page.

[schwim]

Thank you guys so much for the help, I very much appreciate it!