Day 4: CSS Units & Backgrounds

Daily Objective

Master absolute and relative units and customize element backgrounds with colors and images.

1. CSS Units

• Absolute (px): Fixed pixels. Predictable for borders, but not ideal for responsive typography.
• Relative to Root (rem): Scales relative to the <html> root font-size (1rem = typically 16px). Ideal for typography and spacing!
• Relative to Parent (em): Scales relative to the element’s direct font-size.
• Percentage (%): Proportion of the parent element’s dimensions.
• Viewport Units (vw, vh): 1% of the viewport width or height.

2. Backgrounds

.hero-banner {
  background-color: #0f172a;
  background-image: url('images/hero.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Stretches image to cover the entire container */
  min-height: 50vh;
}

Daily Hands-on Practice (70%)

1. Replace all font and padding values in your CSS with rem units.
2. Build a hero section that occupies 60vh with a centered background image using background-size: cover.