Html – CSS changes are not getting reflected. Why?

csshtml

I am working on my website and whenever I am adding some new lines to my CSS file, it just doesn't want to use the lines I made.

Yet, they should be alright.

.what-new {
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3 {
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;

Just as an example.

The CSS file is working at one part, but from somewhere it just stops using my file.
Yet, it is linked in the < head >.

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

And my HTML code is the following(note that this is just a part of the code):

    <div class="what-new">
    <div class="container">
        <h3>What's new</h3>
        <div class="blog-news">
            <div class="blog-news-grid">
                <div class="news-grid-left">
                    <h4>06</h4>
                    <small>of january 2015</small>
    </div>

Anyone know a solution for that?

Best Answer

This means that your CSS rule is not applied or that your CSS file is cached.

The possible causes are:

  • a CSS rule with a higher Specificity is winning over the rule you expect to be applied
  • a CSS rule with the same Specificity is loaded after your
    (the order of declaration counts - the latter wins - so check your CSS file imports)
  • a CSS rule targeting your object uses the !important keyword.

Inspect how the rules are applied through the browser's Developer Tools (open with F12).

HINT: In the CSS panel, the rules are listed by importance in descending order.

  • your CSS has syntax errors
  • your HTML is not well-formed

Use some validator.

  • your browser is caching the CSS file

Force the refresh of the browser-cached resource by pressing CTRLF5.

HINT: This Q&A explores the subject.

  • your server is caching the CSS file

Force the refresh of the server-cached resource by entering the URL of the static resources in the Address Bar and pressing CTRLF5 on that page (that is the CSS file).

HINT: To open the CSS file's URL fastly, use Open link in a new Tab from the browser's Developer Tools, or click on the CSS link in the HTML opened with View Source.