CSS Media Queries mediatype

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

Media queries have an optional mediatype parameter. This parameter is placed directly after the @media declaration (@media mediatype), for example:

@media print {
    html {
        background-color: white;
    }
}

The above CSS code will give the DOM HTML element a white background color when being printed.

The mediatype parameter has an optional not or only prefix that will apply the styles to everything except the specified mediatype or only the specified media type, respectively. For example, the following code example will apply the style to every media type except print.

@media not print {
    html {
        background-color: green;
    }
}

And the same way, for just showing it only on the screen, this can be used:

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

The list of mediatype can be understood better with the following table:

Media TypeDescription
allApply to all devices
screenDefault computers
printPrinters in general. Used to style print-versions of websites
handheldPDA's, cellphones and hand-held devices with a small screen
projectionFor projected presentation, for example projectors
auralSpeech Systems
brailleBraille tactile devices
embossedPaged braille printers
tvTelevision-type devices
ttyDevices with a fixed-pitch character grid. Terminals, portables.


Got any CSS Question?