CSS isn't showing up in Inspect Element?

Question

So this is what the CSS SHOULD look like

  h1{
    font-family:monospace;
}

.main{
    border: solid #000000 0.1px;
    background:rgba(255,255,255,0.3);
}

And this is what shows up in my Inspect Element in Chrome

element.style {
}
user agent stylesheet
html {
    display: block;
}

Try clearing your cache. You Can also check the "Do not cache" checkbox in the inspector under the network tab. This will allow the pages not to be cached when the inspector is open. — jeremykenedy, May 13 '17 at 18:50
What HTML element are you inspecting? Sometimes the chrome tools is bugged close it and open it again or reload the page while closed works for me — Joel Harkes, May 13 '17 at 18:52
I'm inspecting the html element itself. I'm only learning this. — ThisIsNotAUzrName, May 13 '17 at 18:55

score 4 · Accepted Answer · answered May 13 '17 at 19:11

4

Ok, there may be many things that could go wrong but I think the most probable are two:

Your browser is loading the CSS from cache. One way to test this is to add inline css to the element. If it loads, but the changes to your css file don't then what you might check is if there are Expires headers in your .htaccess. In any case the first thing you can do to check if this is the case is to open your Chrome developer tools, go to the Network tab, check the Disable cache option and refresh the page.
If the problem doesn't get fixed with the previous observation you should probably check your CSS, something might be incorrectly written, in a media query that doesn't apply or maybe some semicolon got wild and hid between the lines. It happens.

answered May 13 '17 at 19:11

Mihail Minkov

I got my own CSS to work now...finally. Thanks for the help guys. – ThisIsNotAUzrName May 13 '17 at 19:15
What was the problem @KyleAlexanderSullivan – Mihail Minkov May 13 '17 at 19:19
Did any of the answers do the trick for you? You should accept the one that worked for you to mark the question as answered @KyleAlexanderSullivan – Mihail Minkov May 13 '17 at 19:19

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Try this:

.main{
    border: solid #000000 1px;
    background:rgba(255,255,255,0.3);
}

edited Jun 20 '20 at 09:12

Community

answered May 13 '17 at 18:51

Dalin Huang

That was a typo I may have missed. I'm glad you caught that. – ThisIsNotAUzrName May 13 '17 at 18:58
@KyleAlexanderSullivan are you sure your css are loaded? – Dalin Huang May 13 '17 at 18:59
@KyleAlexanderSullivan also try to do a hard reload to clean the cached CSS style sheet – Dalin Huang May 13 '17 at 19:00
@KyleAlexanderSullivan in case if you not sure how to hard reload: https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.WRdX3Lzyt24 – Dalin Huang May 13 '17 at 19:01

score 0 · Answer 3 · answered May 13 '17 at 19:59

There is nothing wrong with your CSS see the fiddle

border: solid #000000 0.1px;

0.1px is just working, but aint 0.1px it will be set to 1px.

Or your CSS is unable to be found, or some other CSS is overwritting/resetting it.

Can you link the url or make a jsfiddle yourself ? So i can inspect it.

score 0 · Answer 4 · answered Dec 06 '21 at 07:12

0

Simply use: ctrl + shift + R if your CSS properties is not or partially showing in inspect Chrome browser

answered Dec 06 '21 at 07:12

Jacky Bitter

4 Answers4