Learn
Great work! You learned how to size elements on a website relative to other elements on the page.
Let’s review what you learned:
- Content on a website can be sized relative to other elements on the page using relative measurements.
- The unit of
emsizes font relative to the font size of a parent element. - The unit of
remsizes font relative to the font size of a root element. That root element is the<html>element. - Percentages are commonly used to size box-model features, like the width, height, padding, or margin of an element.
- When percentages are used to size width and height, child elements will be sized relative to the dimensions of their parent (remember that parent dimensions must first be set).
- Percentages can be used to set padding and margin. Horizontal and vertical padding and margin are set relative to the width of a parent element.
- The minimum and maximum width of elements can be set using
min-widthandmax-width. - The minimum and maximum height of elements can be set using
min-heightandmax-height. - When the height of an image or video is set, then its width can be set to
autoso that the media scales proportionally. Reversing these two properties and values will also achieve the same result. - A background image of an HTML element will scale proportionally when its
background-sizeproperty is set tocover.
Relative units of measurement are a first step towards incorporating responsive design in a website. When combined with more advanced responsive techniques, you can create a seamless user experience regardless of a device’s screen size.
Instructions
Take some time to experiment with your new knowledge of relative measurements in style.css. When you’re done, proceed to the next unit.
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.