How to Put CSS @Media Rules Inline

Is it possible to put CSS @media rules inline?

@media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it:

The value of the style attribute must match the syntax of the contents of a CSS declaration block

The only way to apply styles to one specific element only in certain media is with a separate rule in your stylesheet (be it linked externally or internally in a <style> element), which means you'll need to come up with a selector for it. You can grab one using your browser's dev tools, or figure out a class and/or ID combination that isolates this element:

#myelement { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    #myelement { background-image: url(particular_ad_small.png); }
}

If you're unable to find a selector that will reliably match this element alone due to the nature of your page, you can use a custom property, provided you don't need to worry about specificity or Internet Explorer:

:root { --particular-ad: url(particular_ad.png); }

@media (max-width: 300px) {
    :root { --particular-ad: url(particular_ad_small.png); }
}

<span style="background-image: var(--particular-ad);"></span>

how to give @media query to my inline style?

Here is what you want, put this in a css file or at be bottom of the <head>. Though the width should always be at 700px because you set them max-width. At the moment it is everything to a max-width of 1920px, everything above will get the 500px.

.edu_table{
     width: 500px;
}

@media only screen and (max-width: 1920px) {
    .edu_table{
         width: 700px;
         margin-right: 400px;
         margin-bottom: 30px;
    }
}

Use media query inline style

Not within an inline style declaration as far as I know.

However, if you're echoing from within PHP and really can't access the stylesheet I would suggest echoing an inline <style /> element with the media query and using a class for the div.

i.e.

<style type="text/css">
    .bg {
        background: url(background.jpg);
    }
    @media only screen and (max-device-width: 480px) { /* Change to whatever media query you require */
        .bg {
             background: url(background_highres.jpg);
        }
    }

</style>
<div class="bg">...</div>

Will inline-styling take precedence over a media query?

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

Is it possible to put CSS @media rules inline?

@media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it:

The value of the style attribute must match the syntax of the contents of a CSS declaration block

#myelement { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    #myelement { background-image: url(particular_ad_small.png); }
}

:root { --particular-ad: url(particular_ad.png); }

@media (max-width: 300px) {
    :root { --particular-ad: url(particular_ad_small.png); }
}

<span style="background-image: var(--particular-ad);"></span>

How to Put CSS @Media Rules Inline

Is it possible to put CSS @media rules inline?

how to give @media query to my inline style?

Use media query inline style

Will inline-styling take precedence over a media query?

Is it possible to put CSS @media rules inline?

Related Topics

Leave a reply