CSS Value and Units Flashcards
What are CSS units, and why are they important?
CSS units define how values like width, height, margin, padding, and font sizes are measured in a webpage. They ensure that elements scale properly based on the design requirements.
What is the difference between absolute and relative units in CSS?
Absolute units (e.g., px, cm, in) have a fixed size that does not change based on the screen or parent element.
Relative units (e.g.,em, rem, %, vw, vh) depend on other elements or the viewport, making them more flexible and responsive.
What is the difference between px and em in CSS?
px (pixels) is an absolute unit that represents a fixed size.
em is relative to the font size of its parent element. If the parent has font-size: 16px, then 1em = 16px.
What does rem stand for, and how is it different from em?
rem stands for “root em” and is relative to the root <html> element’s font size, while em is relative to its nearest parent.
How do viewport units (vw, vh) work?
vw (viewport width) is a percentage of the browser window’s width.
vh (viewport height) is a percentage of the browser window’s height.
For example, 50vw means 50% of the viewport width.
What does ch measure in CSS?
ch is a relative unit that measures the width of the “0” character in the current font. It’s useful for setting widths of text-based elements.
What is the purpose of the ex unit?
The ex unit is relative to the height of the lowercase letter “x” in the selected font. It is less commonly used than em or rem.
What are percentage (%) units used for?
Percentage values are relative to the size of their parent container. For example, width: 50% means the element will take up 50% of its parent’s width.
How would you make an element’s width half of the browser’s width using
div {
width: 50vw;
}
This sets the width of the <div> to 50% of the viewport width.
How do you set an element’s font size to be twice the size of its parent
p {
font-size: 2em;
}
Since 1em equals the parent’s font size, 2em makes it twice as large
How can you set an element’s padding to be 10% of its parent’s width?
.box {
padding: 10%;
}
This makes the padding 10% of the width of .box’s parent.
How do you make an element’s height exactly equal to the viewport height?
.full-screen {
height: 100vh;
}
This ensures the element fills the entire screen height.
This ensures the element fills the entire screen height.
It will set the width to 10 times the font size of the parent element.
How would you create a text box that is always 40 characters wide, regardless of font size?
input {
width: 40ch;
}
The ch unit ensures that the input remains 40 characters wide
How do you set the font size of a paragraph to always be 5% of the viewport width?
p {
font-size: 5vw;
}
This makes the text size scale dynamically based on the viewport width.
What is the difference between min-width: 50% and max-width: 50%?
min-width: 50% ensures the element will not be smaller than 50% of its parent.
max-width: 50% ensures the element will not be larger than 50% of its parent.
What unit would you use for a scalable button that remains proportional to the text inside?
em or rem is the best choice because they scale with the font size. Example:
button {
padding: 0.5em 1em;
font-size: 1.2rem;
}
How can you set the margin of an element to always be half of its parent’s width?
.box {
margin: 50%;
}
This makes the margin size dependent on the parent’s width.
How can you make an element’s width grow based on the font size of the root element?
.container {
width: 10rem;
}
Since rem is based on the root font size, changing the <html> font siz
What would happen if you set font-size: 10vw; on a heading?
The text size will be 10% of the viewport width, making it scale dynamically with the browser size.
What are angle units in CSS, and where are they used?
Angle units define rotations and are used in transforms and gradients.
-
deg→ Degrees (e.g.,rotate(45deg)) -
rad→ Radians -
grad→ Gradians -
turn→ Full turns (1 turn = 360deg)
How do you rotate an element by 90 degrees using CSS?
.box {
transform: rotate(90deg);
}What is the difference between s and ms in CSS?
-
s(seconds) → 1s = 1000ms -
ms(milliseconds) → 500ms = 0.5s
Used in animations and transitions.
How do you create an animation that lasts for 2 seconds?
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fade 2s ease-in-out;
}What are resolution units, and where are they used?
-
dpi→ Dots per inch -
dpcm→ Dots per centimeter -
dppx→ Dots per pixel (1dppx = 96dpi)
Used in media queries to target high-resolution screens.
How do you apply styles only for high-resolution screens?
@media (min-resolution: 2dppx) {
body {
background: url('high-res-image.png');
}
}What does calc() do in CSS?
calc() allows mathematical operations for dynamic sizing.
Example:
.box {
width: calc(100% - 50px);
}
This makes the width flexible but subtracts 50px.
What is the difference between min(), max(), and clamp()?
min(value1, value2): Picks the smallest value.
max(value1, value2): Picks the largest value.
clamp(min, preferred, max): Keeps a value within a range.
How do you ensure a heading’s font size is responsive but never smaller than 16px or bigger than 5vw?
h1 {
font-size: clamp(16px, 2vw, 5vw);
}
This ensures the font is at least 16px but scales with the viewport up t
How do you create a box that is at least 200px wide but not more than 80% of the parent width?
.box {
width: min(80%, 200px);
}
The element will never be smaller than 200px but won’t exceed 80% of its
