CSS (Cascading Style Sheets) is a stylesheet language used to describe the look and formatting of a document written in HTML. Pure CSS is a term used to describe the styling of a web page using only CSS, without the use of JavaScript or other programming languages. It allows developers to separate the presentation of a web page from its structure, making it easier to maintain and update the look and feel of a website without affecting the underlying content. With Pure CSS, you can add various styles to your HTML elements such as color, background, font, text alignment, and much more.
Default Media Queries: Media Queries in CSS are a set of CSS rules that apply different styles based on specific conditions like screen size, device type, and other characteristics of the user’s environment. The default media query is used to apply the same styles to all devices. These styles are applied by default, and only specific styles are overridden by media queries when the conditions defined in the media queries are met. Media queries help in responsive web design, where the layout of a web page adjusts based on the size of the device’s screen.
Media Queries:
- @media screen: This is the default media type and applies to computer screens, tablets, and smartphones.
- @media print: This applies when the document is printed or viewed in print preview mode.
- @media (max-width: 600px): This applies when the screen size is 600 pixels or smaller. You can change the value to target different screen sizes.
- @media (min-width: 600px): This applies when the screen size is 600 pixels or larger. You can change the value to target different screen sizes.
- @media (orientation: portrait): This applies when the device is in portrait orientation.
- @media (orientation: landscape): This applies when the device is in landscape orientation.
- @media (min-resolution: 300dpi): This applies when the device has a resolution of 300 dots per inch or higher. You can change the value to target different resolutions.
- @media (hover: hover): This applies when the device supports hover (e.g. a mouse). You can use this to target devices without hover support with a fallback style.
- @media (pointer: fine): This applies when the device has a fine pointer (e.g. a mouse or stylus).
- @media (pointer: coarse): This applies when the device has a coarse pointer (e.g. a finger).
- @media (any-pointer: fine): This applies when any available pointer on the device is fine.
- @media (any-pointer: coarse): This applies when any available pointer on the device is coarse.
Note: This is not an exhaustive list, and there are many more media query classes that can be used to target different device features and characteristics.
CSS media queries with their respective device sizes and class names:
| Media Query | Device Size | Class Name |
| @media (max-width: 767px) | Extra Small Devices (Phones) | .xs |
| @media (min-width: 768px) and (max-width: 991px) | Small Devices (Tablets) | .sm |
| @media (min-width: 992px) and (max-width: 1199px) | Medium Devices (Laptops) | .md |
| @media (min-width: 1200px) | Medium Devices (Laptops) | .lg |
| @media (min-width: 768px) and (max-width: 1199px) | Medium and Small Devices | .md, .sm |
| @media (max-width: 992px) | Large and Medium Devices | .lg, .md |
| @media (max-width: 1200px) | Large, Medium, and Small Devices | .lg, .md, .sm |
Note: The specific device sizes can vary depending on the source, and some sources may use slightly different size categories or class names.
Syntax:
@media screen and (condition) {
/* styles to apply when condition is met */
}Example 1: This shows how to use media queries to change the font size of a document based on the width of the viewport.
- This code sets the default font size for the body of a web page to 20px. It uses media queries to apply different styles to the <h1> and <h3> elements based on the width of the viewport.
- The first media query @media (max-width: 600px) applies styles to the <h1> and <h3> elements when the width of the viewport is less than 600 pixels. In this case, the <h1> element’s font size is set to 22px, and the <h3> element’s font size is set to 20px.
- The second media query @media (min-width: 600px) applies styles to the <h1> and <h3> elements when the width of the viewport is greater than or equal to 600 pixels. In this case, the <h1> element’s font size is set to 40px, and the <h3> element’s font size is set to 36px.
This allows for a responsive design, where the font size of these elements adjusts based on the width of the viewport, providing an optimal viewing experience for users on different devices with varying screen sizes.
HTML code:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Pure CSS Default Media Queries</h3>
<p>Welcome to GeeksforGeeks</p>
</body>
</html>
|
style.css: This code is used in the above HTML file.
/* Default font size */body { font-size: 20px;
} /* Media query for viewport width less than 800px */
@media (max-width: 600px) {
h1 {
font-size: 22px;
}
h3 {
font-size: 20px;
}
} /* Media query for viewport width greater than 800px */
@media (min-width: 600px) {
h1 {
font-size: 40px;
}
h3 {
font-size: 36px;
}
} |
Output:
Example 2: This shows media queries to change the background color of a document based on the width of the viewport.
- This code sets the default font size for the body of a web page to 20px. It then uses media queries to apply different styles to the <h1> and <h3> elements based on the width of the viewport.
- The first media query @media (max-width: 600px) applies styles to the <h1> and <h3> elements when the width of the viewport is less than 600 pixels. In this case, the <h1> element’s font size is set to 22px, and the <h3> element’s font size is set to 20px.
- The second media query @media (min-width: 600px) applies styles to the <h1> and <h3> elements when the width of the viewport is greater than or equal to 600 pixels. In this case, the <h1> element’s font size is set to 40px, and the <h3> element’s font size is set to 36px.
This allows for a responsive design, where the font size of these elements adjusts based on the width of the viewport, providing an optimal viewing experience for users on different devices with varying screen sizes.
In this example, the default background color of the body is set to white. The three media queries are used to change the background color of the body based on the width of the viewport. If the viewport width is less than 600px, the background color changes to yellow. If the viewport width is between 600px and 800px, the background color changes to Pink. If the viewport width is greater than 800px, the background color changes to light blue.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Pure CSS Default Media Queries</h3>
<p>Welcome to GeeksforGeeks</p>
</body>
</html>
|
style.css: This code is used in the above HTML file
/* Default background color */body { font-size: 20px;
background-color: white;
} /* Media query for viewport width less than 800px */
@media (max-width: 600px) {
body {
background-color: yellow;
}
} /* Media query for viewport width between 800px and 1200px */
@media (min-width: 600px) and (max-width: 800px) {
body {
background-color: rgb(234, 6, 204);
}
} /* Media query for viewport width greater than 1200px */
@media (min-width: 800px) {
body {
background-color: rgb(13, 190, 234);
}
} |
Output:
Reference: