Link Search Menu Expand Document
HTML&CSS

CSS Units

Class Agenda

  1. Introduction to CSS Units
  2. CSS Font Size
  3. CSS Height & Width
  4. CSS Max-width

1. Introduction to CSS Units

  • What are CSS Units used for?
  • What are Absolute Length Units (cm, px, in etc.) ?
  • What are Relative Length Units (em, % etc.) ?
  • What do we mean by “absolute”? What do we mean by “relative”?
  • What are the most used units and what are the differences between them? (px vs em vs rem)

ETA: 40mins

2. CSS Font Size

  • font-size - using some of the units
    • Practice sizing text size using absolute unit (px)
    • Practice sizing text size using relative unit (em or rem)

ETA: 15mins

3. Height & Width

  • cover sizing with units
  • cover sizing with non-numeric CSS values (e.g auto)

ETA: 30mins

4. CSS Max-Width

  • What is the difference between max-width and width?

ETA: 15mins

Exercise Description

  • Increase the font-size of the “About Me”, “Education” and “Language Profiencicy” headers in your portfolio website
  • Align your profile image at the center of the page and make it 20% of the screen size (the image size should adjust on different screen-sizes)
  • At the end of this exercise, your portfolio website should like what we have in Checkpoint10 branch.

ETA: 10mins

Homework

  • Practice how to use at least 5 CSS units each for relative and absolute length units

Resources