cssgoogle-chromeinspect-element

CSS isn't showing up in Inspect Element?

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;
}
Solution

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

    1. 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.

    2. 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.