How do I use css @import rule for a media query?

hoodedvul

Note: If your media queries apply to all media types, " screen and" can be left out.

Also see: How do I use a css media query in a link tag?

This example show the use of the CSS @import rule for media queries.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Starter HTML Page</title>
  <meta name="description" content="HTML starter page">
  <meta name="author" content="Demo">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   @import url("375px.css") screen and (max-width: 375px);
</style>
</head>

<body>

<h2>The wonderful colors of flowers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet massa vitae tortor. Pretium nibh ipsum consequat nisl vel pretium. Interdum posuere lorem ipsum dolor.</p>

</body>
</html>

The 375px.css file

body {
  background-color: green;
}

The display for this article is the same as the article at the top. This just shows a different way of using media queries.