Skip to content
This repository has been archived by the owner on Aug 17, 2024. It is now read-only.

Commit

Permalink
CSS Units table improvement (#582)
Browse files Browse the repository at this point in the history
* improve css units table to add names, order more logically, and give more accurate description of pixels

* use code markup for css unit examples

* simplify description of CSS pixel, and clarify absolute vs relative CSS units

---------

Signed-off-by: Sally McGrath <[email protected]>
Co-authored-by: Sally McGrath <[email protected]>
  • Loading branch information
shieldo and SallyMcGrath authored Oct 28, 2023
1 parent df66b8d commit fe6a0b3
Showing 1 changed file with 16 additions and 11 deletions.
27 changes: 16 additions & 11 deletions docs/html-css/week-1/lesson.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -415,30 +415,35 @@ The following table contains some of the most commonly used CSS units.
<thead>
<tr>
<th>Unit</th>
<th>Name</th>
<th>Relative or absolute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>px</code></td>
<td>pixel</td>
<td>Absolute</td>
<td>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.</td>
</tr>
<tr>
<td><code>rem</code></td>
<td>rem</td>
<td>Relative</td>
<td>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</td>
<td><code>1rem</code> is equal to the font size of the root element. If the root font size is <code>16px</code>, then <code>1rem</code> = <code>16px</code> and <code>0.5rem</code> = <code>8px</code></td>
</tr>
<tr>
<td><code>em</code></td>
<td>em</td>
<td>Relative</td>
<td>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</td>
<td><code>1em</code> is equal to the font size of the parent element. If the parent font size is <code>16px</code>, then <code>1em</code> = <code>16px</code> and <code>0.5em</code> = <code>8px</code></td>
</tr>
<tr>
<td><code>%</code></td>
<td>percent</td>
<td>Relative</td>
<td>100% is equal to the full width or height of the parent element</td>
</tr>
<tr>
<td><code>px</code></td>
<td>Absolute</td>
<td>1px is 1/96th of 1 inch</td>
<td><code>100%</code> is equal to the full width or height of the parent element</td>
</tr>
</tbody>
</table>
Expand Down

0 comments on commit fe6a0b3

Please sign in to comment.