How can I override inline styles with external CSS?

by

The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }
<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

Important Notes:

  • Using !important is not considered as a good practice. Hence, you should avoid both !important and inline style.

  • Adding the !important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element.

  • It even overrides the inline styles from the markup.

  • The only way to override is by using another !important rule, declared either with higher CSS specificity in the CSS, or equal CSS specificity later in the code.

  • Must Read – CSS Specificity by MDN 🔗

More Related Contents:

  1. Transitions on the CSS display property
  2. How to use HTML to print header and footer on every printed page of a document?
  3. Does Firefox support position: relative on table elements?
  4. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  5. Add Bootstrap Glyphicon to Input Box
  6. How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]
  7. How to make a floated div 100% height of its parent?
  8. How do I uncollapse a margin? [duplicate]
  9. SVG animation is not working on IE11
  10. not:first-child selector
  11. Why is @font-face throwing a 404 error on woff files?
  12. SVG USE element and :hover style
  13. How to make fixed header table inside scrollable div?
  14. Dynamically change color to lighter or darker by percentage CSS
  15. top nav bar blocking top content of the page
  16. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  17. Using CSS, can you apply a gradient mask to fade to the background over text?
  18. What is the purpose of this purple dashed line area?
  19. How to make this Header/Content/Footer layout using CSS?
  20. Sass @each with multiple variables
  21. CSS: Width and Max-Width
  22. Flip a 3D card with CSS
  23. How to create a radial menu in CSS?
  24. Overlay a background-image with an rgba background-color
  25. CSS select multiple descendants of another element
  26. Select all ‘tr’ except the first one
  27. Do I not understand the flex-grow property?
  28. Is there a way to style HTML5’s range control?
  29. Keep background image fixed during scroll using css
  30. How to keep :active css style after clicking an element

Leave a Comment