CSS Lesson 6 – Colors and Units | Dataplexa

LESSON 6

Colors and Units

Master color systems and measurement units to create precise, beautiful designs that work across all devices.

Colors bring your website to life. Units give you control over every pixel. Together, they transform plain HTML into stunning designs. The WanderLust team needs vibrant destination cards and responsive spacing — you'll learn both through hands-on examples.

CSS Property Anatomy for Colors

h1
{
color
:
#0ea5e9
;
}

Selector

Property

Value

The selector targets which elements to style. The property says what aspect to change. The value defines the exact color or measurement.

Color Systems

CSS offers multiple ways to define colors. Each system has different strengths — hex codes for precision, RGB for transparency, HSL for intuitive adjustments.

Hex Colors

Hex colors use six characters after a hashtag. Think of it like a color recipe: two digits for red, two for green, two for blue. #0ea5e9 breaks down to 0e (red), a5 (green), e9 (blue).

/* WanderLust destination cards with brand colors */
.destination-card {
  background-color: #0ea5e9; /* Primary sky blue */
  color: #ffffff; /* Pure white text */
}

.book-now-button {
  background-color: #f97316; /* Sunset orange accent */
  border: 2px solid #0f172a; /* Dark border */
}

What just happened?

The cards turned sky blue with white text, and buttons became orange with dark borders. Hex codes give you precise control — designers love them because they work the same everywhere. Try changing #0ea5e9 to #10b981 for green cards.

RGB and RGBA Colors

RGB uses numbers from 0 to 255 for red, green, and blue. RGBA adds an alpha channel — the "A" stands for transparency, where 0 is invisible and 1 is solid.

/* WanderLust photo overlays with transparency */
.photo-overlay {
  background-color: rgba(15, 23, 42, 0.8); /* Dark with 80% opacity */
  color: rgb(248, 250, 252); /* Light gray text */
}

.highlight-text {
  background-color: rgba(249, 115, 22, 0.2); /* Orange with 20% opacity */
  color: rgb(14, 165, 233); /* Sky blue text */
}

What just happened?

The dark overlay lets text show clearly over photos, while the highlight text gets a subtle colored background. RGBA transparency creates professional overlays — perfect for hero images and call-to-action buttons. Try changing the 0.8 to 0.3 for lighter overlay.

HSL Colors

HSL stands for Hue, Saturation, and Lightness. Think of a color wheel: hue is the position (0-360 degrees), saturation is how vivid (0-100%), lightness is how bright (0-100%). Designers love HSL because it's intuitive — want a lighter blue? Just increase the lightness value.

/* WanderLust theme variations using HSL */
.primary-button {
  background-color: hsl(199, 89%, 48%); /* Sky blue: hue 199° */
  color: hsl(0, 0%, 100%); /* Pure white */
}

.hover-button:hover {
  background-color: hsl(199, 89%, 38%); /* Same hue, darker */
}

.accent-badge {
  background-color: hsl(25, 95%, 53%); /* Orange: hue 25° */
  color: hsl(222, 84%, 5%); /* Very dark blue */
}

What just happened?

HSL made it easy to create button hover effects — just change the lightness from 48% to 38% for the same blue, but darker. The orange badges use a different hue (25° vs 199°) but similar saturation levels. Try changing the hue values to create your own color scheme.

CSS Units

Units tell CSS how big or small to make things. Some units are absolute (always the same size), others are relative (change based on context). Picking the right unit makes your design flexible and accessible.

Absolute Units

px, pt, cm — always the same size, like rulers

Relative Units

%, em, rem, vw — change based on parent or screen

Pixel Units (px)

Pixels are like tiny dots on your screen. font-size: 16px means the text is 16 dots tall. Pixels give you exact control but don't adapt to user preferences.

/* WanderLust navigation with pixel-precise spacing */
.navbar {
  height: 60px; /* Exact height */
  padding: 0 24px; /* Left and right padding */
  font-size: 14px; /* Readable navigation text */
}

.logo {
  width: 120px; /* Fixed logo width */
  height: 40px; /* Fixed logo height */
}

Percentage Units (%)

Percentages are relative to the parent element. If a container is 400px wide, width: 50% makes the child 200px wide. Percentages create flexible layouts that adapt to any screen size.

/* WanderLust responsive image gallery */
.gallery-container {
  width: 100%; /* Full width of parent */
  max-width: 800px; /* But never wider than 800px */
}

.gallery-item {
  width: 48%; /* Two columns with space between */
  margin-bottom: 4%; /* Proportional spacing */
}

.featured-image {
  width: 100%; /* Fill the container completely */
  height: auto; /* Keep aspect ratio */
}

What just happened?

The gallery items stayed at 48% width each, creating two columns with automatic spacing. When you resize the browser, the items scale proportionally. The 4% margin creates consistent gaps that also scale. Try changing 48% to 30% to see three columns instead.

REM and EM Units

REM units are relative to the root element's font size (usually 16px). EM units are relative to the parent element's font size. REM creates consistent scaling, while EM creates nested scaling effects.

/* WanderLust typography system with rem units */
.hero-title {
  font-size: 3rem; /* 48px if root is 16px */
  margin-bottom: 1rem; /* 16px spacing */
}

.card-title {
  font-size: 1.5rem; /* 24px - scales with user preferences */
  margin-bottom: 0.5rem; /* 8px spacing */
}

.body-text {
  font-size: 1rem; /* 16px - base size */
  line-height: 1.6em; /* 1.6 times the current font size */
}

What just happened?

REM units created a consistent hierarchy — the hero title is exactly 3 times larger than body text. If a user changes their browser's default font size, everything scales proportionally. The line-height uses EM to stay relative to each text block's font size.

Viewport Units (vw, vh)

Viewport units are relative to the browser window size. 100vw means full window width, 100vh means full window height. These units make elements that perfectly fit the screen.

/* WanderLust full-screen hero section */
.hero-banner {
  height: 100vh; /* Full screen height */
  width: 100vw; /* Full screen width */
  background-color: #0ea5e9;
}

.hero-text {
  font-size: 5vw; /* Text scales with screen width */
  max-font-size: 48px; /* But never too big */
}

.scroll-indicator {
  width: 80vw; /* 80% of screen width */
  height: 4px; /* Fixed height */
}

What just happened?

The hero banner fills exactly one screen height (100vh) and full width (100vw). The text size scales with screen width (5vw) — bigger screens get bigger text automatically. The scroll indicator stays at 80% screen width. Perfect for creating immersive landing pages that adapt to any device.

Practical Color and Unit Combinations

Real websites combine multiple color systems and units. Smart developers use hex for brand colors, RGBA for overlays, rem for typography, and percentages for layouts.

/* WanderLust booking form combining all techniques */
.booking-form {
  width: 90%; /* Responsive width */
  max-width: 32rem; /* Max width in rem units */
  background-color: #ffffff; /* Hex for precision */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* RGBA for transparency */
}

.form-field {
  margin-bottom: 1.5rem; /* Rem for consistent spacing */
  padding: 0.75rem; /* Rem for scalable padding */
  border: 2px solid hsl(210, 16%, 93%); /* HSL for easy adjustment */
  color: hsl(222, 84%, 5%); /* HSL dark text */
}

.submit-button {
  width: 100%; /* Full width of parent */
  font-size: 1.125rem; /* Slightly larger rem text */
  background: linear-gradient(45deg, #0ea5e9, #f97316); /* Hex gradient */
}

What just happened?

The form combines percentage width for responsiveness, rem max-width for readability limits, hex colors for the gradient, RGBA for the subtle shadow, and HSL for the border colors. Each unit type serves its purpose — percentages for flexibility, rem for accessibility, hex for brand consistency.

Best Practice Tips

Use hex colors for brand consistency, RGBA for overlays and shadows, HSL when you need to adjust lightness or saturation. For units: rem for typography, percentages for flexible layouts, pixels for borders and precise details, viewport units for full-screen sections. Always test your color combinations for accessibility.

Quiz

Typography Basics

Master font families, sizing, spacing, and text effects to create readable, beautiful content that guides users through your design.

← Previous Course Index Next →