<style>
p {
background-color: blue;
color: white;
}
</style>
<style media="all and (max-width: 500px)">
p {
background-color: yellow;
color: blue;
}
</style>
<p>My background is yellow and my content is blue on browsers up to 500px wide. Otherwise, my background is blue and content is white.</p>
body {
height: 100vh;
display: flex;
place-items: center;
}
p {
font-size: 1.25;
line-height: 1.25;
margin: auto;
padding: 1rem;
width: min(90%, 600px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.