CODEWITHSUNDEEP
htmlcssmedia-querieshtml-email
Steez
Steez

Reputation: 229

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!!

Upvotes: 1

Views: 1995

Answers (2)

user4744712
user4744712

Reputation:

When the browser consumes your page, it consumes it like a stream of text. It will first encounter your <script> and <link> tags, then download and execute the JavaScript and/or CSS files. The browser will then move on with the stream to your <body>. If you have inline-styles, the page must be re-drawn by the browser b/c now it has encountered new CSS inside the HTML. Inline-styles take the highest precedence and typically should be avoided, but they will overwrite what is in your external CSS files.

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28465

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

Upvotes: 5

Related Questions