Colors, Backgrounds, Borders, Units, and Sizing Foundations
Build visual styling basics with color systems, size units, borders, backgrounds, and practical interface sizing decisions.
Inside this chapter
- Working with Color
- Background Styling
- Borders and Rounded Shapes
- Common CSS Units
- Width, Height, min and max Constraints
- Business Example
Series navigation
Study the chapters in order for the clearest path from CSS basics and styling foundations to advanced layout, responsive design, architecture, and maintainable interface systems. Use the navigation at the bottom to move smoothly through the full tutorial series.
Working with Color
.button {
background-color: #1f6feb;
color: white;
}CSS supports named colors, hex values, RGB, RGBA, HSL, and more. Students should learn color not only as decoration, but as part of hierarchy, state, contrast, and usability.
Background Styling
.hero {
background: linear-gradient(135deg, #f0f7ff, #ffffff);
}Backgrounds can use solid colors, gradients, images, and layered effects. They shape atmosphere and readability, especially on modern responsive pages.
Borders and Rounded Shapes
.card {
border: 1px solid #d0dbe7;
border-radius: 16px;
}Borders help define boundaries, group elements, and communicate component structure. Border radius can soften or sharpen the overall visual tone.
Common CSS Units
pxfor fixed pixel-based sizing%for relative sizing based on parent contextemandremfor scalable typography and spacingvwandvhfor viewport-relative measurements
Width, Height, min and max Constraints
Strong layout design often relies on min-width, max-width, min-height, and related constraints so content remains readable and stable across screens.
Business Example
A pricing card may need a clear border, strong contrast, consistent width, and background treatment that separates it from surrounding content. Small CSS decisions here strongly affect user perception and conversion behavior.