Search code examples
htmlcssmedia-querieshtml-email

Will inline-styling take precedence over a media query?

I have previously built out email with html and inline css. I recently decided to add media queries to make them more mobile-friendly. However I was wondering if the inline-styling (css) will take precedence over and media query.

For ex: If I make a media query for an iPhone will the email display styling from the appropriate media query or the inline-styling?

Thanks!!

Solution

  • When you define inline style then it is available for all devices and any set of media queries you write.

    And inline style has the highest precedence so in your case styling displayed will be having inline styles.

    In case you want to override inline styles then you need to add styles in your media queries using !important.

    For reference - CSS Specificity