CSS Value Resolution Last Updated : 29 Jun, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report CSS Resolution is one of the data-type. As the name suggests it is used for specification of resolution meaning the density of pixels on the output device. Resolutions are generally used while writing media-queries. The user can use the resolution with max and min prefix while writing the media Query. What is Media Query :Media Query is used for Responsive web development which can be used to change the screen styling based on the various characteristics of the output device. It is defined in CSS3. Characteristics of Resolution data-type: It is always a positive value.It always has a unit: dpi, dpcm, dppx, x.There should not be any space between the positive value and unit. Units: There are 3 main units for specifying Resolution- dpi: It stands for Number of dots per inch.dpcm: It stands for dots per centimeter.dppx or x: dots per px unit. Example of Resolution: html <!DOCTYPE html> <html> <head> <style> h1 { border: 2px solid #000000; } /* Exact resolution */ @media (min-resolution: 10dpi) { h1 { color: white; } } /* Exact resolution */ @media (max-resolution: 500dpi) { h1 { background: green; } } </style> </head> <body> <h1>Geeks For Geeks Example</h1> </body> </html> Output: OUTPUT As shown in the above example : min-resolution is set to 10dpi, hence on device with resolution greater than 10dpi color : white styling will be applied to <h1> tagmax-resolution is set to 500dpi, hence on device with resolution less than 500dpi background : green styling will be applied to <h1> tag Comment More infoAdvertise with us Next Article CSS | Value Integer S shantanujoshi Follow Improve Article Tags : Web Technologies CSS CSS-Basics CSS-Questions Similar Reads CSS Frequency Value The frequency is a data type of CSS value. It represents the frequency dimension of sound like speaking frequency. This value is currently not used by any CSS properties. Back before it was used to measure the sound wave frequency. It holds a number with a unit(Hz or kHz). Syntax: frequency: number 2 min read What is a Resolution? An image can be defined with the help of two-dimensional array specifically arranged in rows and columns. In other words, we can say an image is like a file containing some kind of visual information or data that can be displayed or rendered on some kind of screen. A resolution is an important aspec 7 min read CSS scale() Function The scale() function is an inbuilt function which is used to resize the element in 2D plane. It scales the elements in horizontal and vertical directions. Syntax:scale( sx )orscale( sx, sy )Parameters:sx: It resizes the elements in horizontal plane.sy: It resizes the elements in vertical plane. If v 2 min read CSS scaleX() Function The scaleX() function is an inbuilt function which is used to resize an element along the x-axis in a 2D plane. It scales the elements in a horizontal direction. Syntax: scaleX() = scaleX( number ) Parameters: This function accepts single parameter number which holds the scaling factor along x-axis. 1 min read CSS | Value Integer CSS data type integer represents <integer > .It is a whole number which can be positive(+) or negative(-) .Integer contains one or more than one digits between 0-9.No decimal value is allowed . No units are required to represent an integer value. A lot of CSS properties take integer value like 2 min read CSS Value | Initial The initial value keyword is used to set an element's CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element. Syntax: property_name: initial; Example 1: setting font size html <!DOCTYPE html> <html> <meta charset="utf-8 1 min read Like