CSS Units

Lecture 45:- CSS Units

CSS units are used to specify the size and dimensions of elements in a web page. There are several units of measurement that can be used in CSS, including:

• Pixels (px): a unit of length that is fixed and corresponds to a physical pixel on the display.
• Points (pt): a unit of length commonly used in print design, equal to 1/72 of an inch.
• Ems (em): a unit of length that is proportional to the font size of an element. 1em is equal to the size of the font for that element.
• Rems (rem): similar to ems, but 1rem is equal to the font size of the root element (usually the html element), making it a more consistent unit across the entire document.
• Percentages (%): a unit of length relative to the size of the parent element. For example, setting the width of an element to 100% will make it fill the entire width of its parent.
• Viewport units (vw, vh, vmin, vmax): units of length based on the size of the viewport (the visible portion of the web page). 1vw is equal to 1% of the viewport width, 1vh is equal to 1% of the viewport height, and vmin and vmax are equal to the minimum and maximum of the viewport width and height, respectively.

When specifying length in CSS, you should choose the unit of measurement that best fits your needs and provides the desired behavior. For example, when specifying the width of an element, you may use pixels for a fixed width, or percentages for a flexible width that adjusts to the size of the parent element. Similarly, when specifying font size, you may use points for a fixed size, or ems for a size that is proportional to the surrounding text.