Learn CSS
"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."
CSS Units
CSS units are used to specify measurements for various CSS properties such as length, width, margin, padding, and font-size. In this chapter, we'll discuss the different types of CSS units and how to use them.
Absolute Units
Absolute units are fixed units that do not change relative to other units or the viewport. They are commonly used for print styles, where the output size is fixed. There are two types of absolute units:
px : Pixels are the most common absolute unit in CSS. One pixel is equal to one dot on a screen. It is fixed in size and does not scale with the viewport.
pt : Points are another absolute unit in CSS, typically used in print media. One point is equal to 1/72 inch.
Relative Units
Relative units are based on the size of other elements on the page, the viewport size, or the font-size of the parent element. Relative units are useful in creating responsive designs that adapt to different viewport sizes. There are four types of relative units:
em : The em unit is based on the font-size of the parent element. One em is equal to the font-size of the parent element. For example, if the parent element has a font-size of 16px, one em is equal to 16px.
rem : The rem unit is similar to em, but it is based on the font-size of the root element (typically the <html> element). This makes it easier to create consistent designs across different elements and avoids compounding effects from nested elements.
% : The percentage unit is based on the size of the parent element. For example, if the width of the parent element is 200px and the child element has a width of 50%, the child element will have a width of 100px.
vw/vh : The viewport width (vw) and viewport height (vh) units are based on the size of the viewport. One vw is equal to 1% of the viewport width, and one vh is equal to 1% of the viewport height. These units are useful for creating designs that adapt to different screen sizes.
Other Units
ch : The ch unit is based on the width of the "0" character in the current font.
ex : The ex unit is based on the height of the "x" character in the current font.
fr : The fr unit is used in CSS Grid Layouts to distribute available space between grid items.
vmin/vmax : The vmin and vmax units are based on the smaller or larger dimension of the viewport, respectively.
CSS units are used to specify measurements for various CSS properties. Understanding the different types of CSS units and when to use them is important for creating responsive designs that adapt to different viewport sizes. When choosing units, it's essential to consider the design requirements and the user experience to ensure that the design is accessible and usable for all users.