diff --git a/docs/html-css/week-1/lesson.md b/docs/html-css/week-1/lesson.md index a2acf79d24..7ec4b4a81d 100644 --- a/docs/html-css/week-1/lesson.md +++ b/docs/html-css/week-1/lesson.md @@ -404,9 +404,9 @@ CSS also uses measurement units like these. There are two types of units: absolute and relative units. -- Absolute units are always the same size, even when the user zooms in on the browser. -- Relative units are based on the size of something else, such as the font size or viewport size. - When the user zooms in the browser, elements using relative units will increase in size too. +- Absolute units represent the same size regardless of the size of parent HTML elements or of the viewport +(i.e. the visible area of the browser). +- Relative units are based on the size of something else, such as of parent HTML elements or of the viewport. The following table contains some of the most commonly used CSS units. @@ -415,30 +415,35 @@ The following table contains some of the most commonly used CSS units. Unit + Name Relative or absolute Description + + px + pixel + Absolute + This used to refer to real physical pixels on screens, but on modern devices with high resolution displays one CSS pixel is usually rendered using a whole multiple of real pixels. + rem + rem Relative - 1rem is equal to the font size of the root element. If the root font size is 16px, then 1rem = 16px and 0.5rem = 8px + 1rem is equal to the font size of the root element. If the root font size is 16px, then 1rem = 16px and 0.5rem = 8px em + em Relative - 1em is equal to the font size of the parent element. If the parent font size is 16px, then 1em = 16px and 0.5em = 8px + 1em is equal to the font size of the parent element. If the parent font size is 16px, then 1em = 16px and 0.5em = 8px % + percent Relative - 100% is equal to the full width or height of the parent element - - - px - Absolute - 1px is 1/96th of 1 inch + 100% is equal to the full width or height of the parent element