Welcome to this CSS colors and box model tutorial. Here you’ll learn how to work with colors, understand the different measurement units, and master the box model — the concept behind every element’s spacing and sizing.
This is Tutorial 2 of 10 in our complete CSS series on Tutorials Ocean’s CSS category. If you missed it, check out Tutorial 1: CSS Basics, Syntax & Selectors first.
CSS Colors: Three Ways to Define Them
Any CSS colors and box model tutorial has to start with colors, since they’re used everywhere — text, backgrounds, borders, shadows.
p {
color: red;
}
p {
color: #ff0000;
}
p {
color: rgb(255, 0, 0);
}
p {
color: hsl(0, 100%, 50%);
}| Format | Example | Notes |
|---|---|---|
| Named colors | red, blue, teal | Simple but limited to 140 predefined names |
| Hex | #ff0000 | Most common, precise, used in design tools |
| RGB | rgb(255, 0, 0) | Red, Green, Blue values from 0-255 |
| HSL | hsl(0, 100%, 50%) | Hue, Saturation, Lightness — easiest to adjust manually |
You can also add transparency using rgba() or hsla(), where the fourth value controls opacity from 0 to 1.
background-color: rgba(0, 0, 0, 0.5);CSS Units: Absolute vs Relative
Choosing the right unit is one of the trickiest parts for beginners in any CSS colors and box model tutorial, so let’s break it down clearly.
| Unit | Type | What It Means |
|---|---|---|
| px | Absolute | Fixed pixel value, doesn’t scale with anything |
| % | Relative | Percentage of the parent element’s size |
| em | Relative | Relative to the font-size of the parent element |
| rem | Relative | Relative to the root (html) font-size — more predictable than em |
| vw / vh | Relative | Percentage of the viewport width/height — useful for full-screen sections |
Practical tip: Most modern developers use rem for font sizes and spacing, and % or vw/vh for responsive layout widths. Plain px is still fine for small, fixed details like border thickness.
For the full official reference, check the MDN documentation on CSS values and units.
The CSS Box Model
Every single HTML element on a page is treated as a rectangular box by CSS. Understanding this box model is the single most important concept in any CSS colors and box model tutorial.
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}| Layer | Purpose |
|---|---|
| Content | The actual text or content inside the box |
| Padding | Space between the content and the border |
| Border | The line that wraps around the padding and content |
| Margin | Space outside the border, separating this box from others |
Picture it like a framed photo on a wall: the photo is the content, the mat around it is padding, the frame itself is the border, and the empty wall space around the frame is the margin.
Box-Sizing: A Common Gotcha
By default, width and height only apply to the content — padding and border get added on top, making the box bigger than expected. This trips up almost everyone at first.
* {
box-sizing: border-box;
}Adding box-sizing: border-box makes width and height include padding and border automatically, so your sizing behaves the way most beginners expect. Many developers add this globally at the top of every CSS file.
Shorthand for Margin and Padding
Instead of writing four separate lines, margin and padding support shorthand values.
/* All four sides */
margin: 10px;
/* top/bottom, left/right */
margin: 10px 20px;
/* top, right, bottom, left (clockwise) */
margin: 10px 20px 15px 5px;The same shorthand pattern works identically for padding.
Practice Exercise
Open the style.css file from Tutorial 1 and expand it.
Requirements:
- Add box-sizing: border-box as a global rule at the top of your file
- Style a div with a background-color using hex format
- Give that div padding, a border, and margin using individual properties
- Create a second div and style its spacing using shorthand margin and padding values
- Set your body’s font-size using rem, and one heading’s width using vw
Bonus challenge: Use rgba() to give one element a semi-transparent background color.
Save your file, refresh your browser, and use your browser’s inspector tool to visually see the box model layers around your elements.
What’s Next?
This completes Tutorial 2 of our CSS colors and box model tutorial series. In Tutorial 3, we’ll cover CSS typography — fonts, text styling, and how to bring in custom Google Fonts.
This CSS colors and box model tutorial is part of the complete CSS series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.
