Key Concepts

Review core concepts you need to learn to master this subject

CSS unit em

Usage of Percentages in CSS

background-size: cover;

CSS unit rem

Media Type in Media Queries

And Operator Media Queries

css media query

CSS Media Features in Media Queries

See more

CSS unit em

.nav-container {
  font-size: 10px;
}

.nav-container span {
  font-size: 1.5em; /* 10 x 1.5 = 15px */
}

em is a CSS unit used to create relatively-sized content. 1 em unit represents the base font size of the current element.

In the example code block, <span> elements nested inside of elements with class nav-container will have a font size of 15px.

Sizing Elements
Lesson 1 of 2
  1. 1
    Relative Measurements
    Modern technology allows users to browse the Internet via multiple devices, such as desktop monitors, mobile phones, tablets, and more. Devices of different screen sizes, however, pose a problem fo…
    Start
  2. 2
    Em
    Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as em in CSS. Historicall…
    Start
  3. 3
    Rem
    The second relative unit of measurement in CSS is the rem, coded as rem. Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the _roo…
    Start
  4. 4
    Percentages: Height & Width
    To size non-text HTML elements relative to their parent elements on the page you can use percentages. Percentages are often used to size box-model values, like width and height, padding, border…
    Start
  5. 5
    Percentages: Padding & Margin
    Percentages can also be used to set the padding and margin of elements. When height and width are set using percentages, you learned that the dimensions of child elements are calculated based on t…
    Start
  6. 6
    Width: Minimum & Maximum
    Although relative measurements provide consistent layouts across devices of different screen sizes, elements on a website can lose their integrity when they become too small or large. You can limit…
    Start
  7. 7
    Height: Minimum & Maximum
    You can also limit the minimum and maximum height of an element. 1. min-height — ensures a minimum height for an element’s box. 2. max-height — ensures a maximum height for an eleme…
    Start
  8. 8
    Scaling Images and Videos
    Many websites contain a variety of different media, like images and videos. When a website contains such media, it’s important to make sure that it is scaled proportionally so that users can correc…
    Start
  9. 9
    Scaling Background Images
    Background images of HTML elements can also be scaled responsively using CSS properties. body { background-image: url(‘#’); background-repeat: no-repeat; background-position: center; back…
    Start
  10. 10
    Review: Relative Measurements
    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…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo