Day 8 Web Dev

CSS UNITS

CSS units are used to specify measurements in Cascading Style Sheets (CSS) to define the size, position, and spacing of elements on a web page. There are various types of units available in CSS, each serving a specific purpose. Here are some of the commonly used CSS units:

  1. Absolute Units:

    • Pixels (px): Pixels are the most common unit in CSS. They provide a fixed-size measurement relative to the screen's resolution.

    • Points (pt): Points are commonly used for print media. One point is equal to 1/72nd of an inch.

    • Inches (in): Inches represent physical inches on the screen or paper.

    • Centimeters (cm): Centimeters are used to specify physical measurements in CSS.

  2. Relative Units:

    • Percent (%): Percentages are relative to the parent element. For example, setting a width of 50% means the element will take up half of its parent's width.

    • Viewport Height (vh) and Viewport Width (vw): These units are relative to the viewport's height and width, respectively. 1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width.

    • Relative Font Size (em): The em unit represents the font size of the element relative to its parent's font size. For example, setting font-size: 1.2em means the font size is 1.2 times the parent's font size.

    • Root Font Size (rem): Similar to em, the rem unit represents the font size relative to the root element (usually the <html> element). It allows you to create scalable designs across the entire page.