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.
Colors Typography and the Box Model is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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;Font Properties
Control typography with: font-family (typeface), font-size (em, rem, px), font-weight (100–900), font-style (italic), line-height (readability ratio), and letter-spacing (tracking).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Text Properties
Additional text styling: text-align (left, center, right, justify), text-decoration (underline, line-through, none), text-transform (uppercase, capitalize), text-overflow: ellipsis for truncation.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem vs em vs px
px is absolute. em is relative to the element's own font-size (cascades). rem is relative to the root font-size (predictable). Use rem for most sizing to respect user font preferences.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */The Box Model
Every HTML element is a rectangular box with four layers: content (the actual element dimensions), padding (space inside the border), border, and margin (space outside the border).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
By default (content-box), padding and border are added to the declared width. With box-sizing: border-box, padding and border are included in the declared width — which is almost always what you want.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Margin Collapsing
Vertical margins between adjacent block elements collapse — only the larger margin applies. Margins of a parent and its first/last child also collapse. Flexbox and Grid children don't collapse margins.
Padding Shorthand
The shorthand padding: top right bottom left sets all sides. Two values set vertical and horizontal. Three set top, horizontal, bottom.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Border Properties
Set borders with border: width style color shorthand. Individual sides: border-top, etc. Use border-radius for rounded corners. outline is similar but doesn't affect layout.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Overflow
overflow: hidden clips content that exceeds the element's size. overflow: scroll adds scrollbars. overflow: auto adds scrollbars only when needed. Use overflow-x and overflow-y to control axes independently.
Quick Check
With box-sizing: border-box and width: 300px; padding: 20px; border: 2px solid, what is the element's total rendered width?
Recap: Colors Typography Box Model
Set colors with hex, rgb, or hsl. Apply fonts with font-family, size, weight, and line-height. Every element is a box: content + padding + border + margin. Enable box-sizing: border-box globally for predictable sizing.
Frequently asked questions
Is the “Colors Typography and the Box Model” lesson free?
Yes — the full text of “Colors Typography and the Box Model” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “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. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Colors Typography and the Box Model” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
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