Colors Typography and the Box Model
Apply color with hex, rgb, and hsl values, choose fonts, set sizes and line heights, and use margin, border, and padding to space elements.
CSS Color Values
CSS supports multiple color formats. Use whichever is clearest for your context: hex codes for brand colors, hsl() for easy color adjustments, rgb() for programmatic values, and named colors for quick prototyping.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Background Colors and Images
Set element backgrounds with background-color. Use background-image with gradients or URLs. The background shorthand combines color, image, position, size, and repeat in one declaration.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;All lessons in this course
- Selectors and the Cascade
- Colors Typography and the Box Model
- Display: block inline flex grid basics
- Positioning: relative absolute fixed sticky