Learn and master the top 20 CSS Units interview questions along with detailed answers and code snippets:
- What are CSS units?
CSS units are used to measure and specify sizes and distances in CSS properties. They determine how elements are sized and positioned on a web page. - What are the different types of CSS units?
There are two types of CSS units: absolute units and relative units.
- Absolute units: These units have fixed values that do not change with respect to the viewport or parent element. Examples include pixels (px), points (pt), inches (in), centimeters (cm), etc.
- Relative units: These units are relative to other elements or properties and adjust based on the context. Examples include percentages (%), ems (em), rems (rem), viewport units (vw, vh, vmin, vmax), etc.
3. What is the difference between pixels (px) and percentages (%)?
Pixels (px) are an absolute unit of measurement that provide a fixed size on the screen. Percentages (%) are a relative unit of measurement that scale based on the size of the parent element or the viewport.
.box {
width: 200px; /* Fixed width of 200 pixels */
}
.container {
width: 50%; /* Width is 50% of the parent element */
}- What is the difference between ems (em) and rems (rem)?
Ems (em) and rems (rem) are both relative units of measurement.
However, ems are relative to the font-size of the nearest parent element, while rems are relative to the font-size of the root element (usually the<html>element).
.box {
font-size: 1.5em; /* Font size is 1.5 times the font-size of the parent element */
}
.container {
font-size: 1.2rem; /* Font size is 1.2 times the font-size of the root element */
}- What are viewport units (vw, vh, vmin, vmax)?
Viewport units are relative units of measurement based on the size of the viewport. They allow you to size elements relative to the width or height of the browser window.
- vw: 1% of the viewport width.
- vh: 1% of the viewport height.
- vmin: 1% of the smaller dimension (viewport width or height).
- vmax: 1% of the larger dimension (viewport width or height).
.box {
width: 50vw; /* Width is 50% of the viewport width */
}
.container {
height: 80vh; /* Height is 80% of the viewport height */
}- What are the benefits of using relative units over absolute units?
Using relative units offers several benefits:
- Improved responsiveness: Relative units allow elements to scale based on their context, making designs more adaptable to different screen sizes.
- Better accessibility: Relative units can adjust to user preferences, such as zooming or changing the default font size.
- Easier maintenance: Relative units facilitate making global layout changes by adjusting a single value instead of multiple values spread across the codebase.
7. How do you convert pixels (px) to ems (em)?
To convert pixels to ems, divide the pixel value by the font-size of the parent element.
.box {
font-size: 16px; /* Font size of the parent element */
padding: 1em; /* Padding is 16px */
}- How do you convert pixels (px) to rems (rem)?
To convert pixels to rems, divide the pixel value by the root element’s font-size.
.box {
font-size: 16px; /* Font size of the root element */
margin: 2rem; /* Margin is 32px */
}- What are some use cases for using viewport units?
Viewport units are commonly used for creating responsive designs, such as:
- Scaling images and backgrounds based on viewport size.
- Creating full-height sections or full-screen layouts.
- Establishing consistent spacing and proportions across different screen sizes.
.header {
height: 100vh; /* Header takes up 100% of the viewport height */
}
.image {
width: 80vw; /* Image width is 80% of the viewport width */
}- How do you set a fixed width and height while maintaining aspect ratio using CSS units?
To maintain aspect ratio while setting a fixed width or height, you can use a combination of padding and absolute positioning.
.container {
position: relative;
width: 100%;
padding-top: 75%; /* Height is 75% of the width (4:3 aspect ratio) */
}
.element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}- What are the use cases for using percentages (%) as a unit of measurement?
Percentages are commonly used in CSS for various purposes, including:
- Setting the width, height, or padding of an element relative to its parent container.
- Creating responsive layouts that adjust based on the available space.
- Specifying the position of an element within its parent container.
.container {
width: 80%; /* Container width is 80% of its parent's width */
}
.item {
width: 50%; /* Item width is 50% of its parent's width */
}
.column {
flex-basis: 25%; /* Column width is 25% of its parent's width in a flex container */
}- How do you use the
chunit in CSS?
Thechunit represents the width of the “0” (zero) character in a font. It can be used to create responsive layouts based on the width of characters.
.container {
width: 40ch; /* Container width is equal to 40 characters */
}- What are the use cases for using the
remunit in CSS?
Theremunit is relative to the root element’s font size and provides a convenient way to establish consistent sizing across the entire document.
html {
font-size: 16px; /* Default font size for the document */
}
.container {
padding: 1.5rem; /* Padding is 1.5 times the root element's font size */
}
.title {
font-size: 1.2rem; /* Font size is 1.2 times the root element's font size */
}- How do you use the
vminandvmaxunits in CSS?
Thevminandvmaxunits are relative to the viewport’s dimensions.vminrepresents the smaller of the viewport’s width and height, whilevmaxrepresents the larger of the two.
.container {
width: 80vmin; /* Width is 80% of the smaller dimension (width or height) */
}
.box {
height: 50vmax; /* Height is 50% of the larger dimension (width or height) */
}- How do you use the
exunit in CSS?
Theexunit represents the x-height of a font, which is the height of a lowercase “x”. It can be used for aligning elements based on the font’s x-height.
.container {
line-height: 2ex; /* Line height is twice the x-height of the font */
}- What is the difference between
emandremunits?
Theemunit is relative to the font size of its nearest parent, while theremunit is relative to the font size of the root element.
.container {
font-size: 16px; /* Font size of the parent element or root element */
}
.item {
font-size: 1.5em; /* Font size is 1.5 times the parent's font size */
}
.title {
font-size: 1.2rem; /* Font size is 1.2 times the root element's font size */
}- How do you use the
frunit in CSS Grid?
Thefrunit is used in CSS Grid to define flexible grid tracks. It distributes available space proportionally among the tracks based on their specified fr values.
.container {
display: grid;
grid-template-columns
: 1fr 2fr 1fr; /* Three columns with the middle column twice the size of the others */
}
soorya