CSS changes are not getting reflected. Why? [closed]

by

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.

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. Can’t scroll HTML page down to see full content
  3. How do I vertically center text with CSS? [duplicate]
  4. Fill the remaining height or width in a flex container
  5. Why are my CSS3 media queries not working on mobile devices?
  6. How does the “position: sticky;” property work?
  7. A Space between Inline-Block List Items [duplicate]
  8. CSS vertical alignment of inline/inline-block elements
  9. Center a DIV horizontally and vertically [duplicate]
  10. How to Right-align flex item?
  11. How to remove the space between inline/inline-block elements?
  12. flex container min-height ignored in IE
  13. What’s a 3D doing in this HTML?
  14. Css height in percent not working [duplicate]
  15. Circular percent progress bar
  16. CSS side by side div’s auto equal widths
  17. Setting table column width
  18. How to force table cell content to wrap?
  19. Inline style to act as :hover in CSS
  20. How to make a sticky footer using flexbox in IE11?
  21. Prevent scroll-bar from adding-up to the Width of page on Chrome
  22. Making text background transparent but not text itself
  23. How to display HTML as inline element?
  24. CSS calc not working in Safari and fallback
  25. Stylesheet taken-over/replaced by Chinese characters
  26. How to stretch div height to fill parent div – CSS
  27. Is there an equivalent of CSS max-width that works in HTML emails?
  28. In which order are CSS styles applied?
  29. justify-content: space-between failing to align elements as expected
  30. center inside a with CSS

Leave a Comment