CSS Media Types [css] - blog.howtoclicks.com

CSS Media Types

css

In CSS, media types are used to apply styles based on the type of media that the document is being displayed on. Media types include screen, print, speech, and others.

Here’s an example of how you might use a media type:

@media screen {
    body {
        font-size: 14px;
    }
}

This at-rule would apply the styles within it only when the document is being displayed on a screen (e.g., a computer monitor, a smartphone, etc.).

You can also use media types in a link element to specify different style sheets for different media types. For example:


<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

This would apply the styles in style.css when the document is being displayed on a screen, and the styles in print.css when the document is being printed.

It’s important to note that media types are not supported in all browsers. Some older browsers may not recognize certain media types, so you should test your code in different browsers to ensure that it works as expected.

CSS Media Types

Other Article on Tag css

All Tags