CSS Box Model, Colors & Typography

Introduction

Every element on a webpage is a rectangular box. Understanding the CSS Box Model is fundamental to controlling layout and spacing. This session also covers colors and typography - essential skills for making your pages visually appealing.

The CSS Box Model

The box model describes how every HTML element is rendered as a rectangular box with four layers:

┌─────────────────────────────────────────────────┐
│                    MARGIN                        │
│   ┌─────────────────────────────────────────┐   │
│   │                BORDER                    │   │
│   │   ┌─────────────────────────────────┐   │   │
│   │   │            PADDING               │   │   │
│   │   │   ┌─────────────────────────┐   │   │   │
│   │   │   │                         │   │   │   │
│   │   │   │        CONTENT          │   │   │   │
│   │   │   │                         │   │   │   │
│   │   │   └─────────────────────────┘   │   │   │
│   │   │                                  │   │   │
│   │   └─────────────────────────────────┘   │   │
│   │                                          │   │
│   └─────────────────────────────────────────┘   │
│                                                  │
└─────────────────────────────────────────────────┘

From inside to outside:

1. Content - The actual text, images, etc.
2. Padding - Space inside the border, around the content
3. Border - The edge of the element
4. Margin - Space outside the border, between elements

Content

The content area holds your actual text, images, or other elements.

Setting Dimensions

.box {
  width: 300px;
  height: 200px;
}

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}
/* Total width = 300 + 20 + 20 + 5 + 5 = 350px! */

Padding

Padding creates space inside the element, between the content and the border.

.box {
  padding: 20px;
}

Key Characteristics

• Background color extends through padding
• Creates “breathing room” inside elements
• Values cannot be negative

Padding Shorthand

/* All four sides */
padding: 20px;

/* Top/bottom | Left/right */
padding: 10px 20px;

/* Top | Left/right | Bottom */
padding: 10px 20px 15px;

/* Top | Right | Bottom | Left (clockwise) */
padding: 10px 20px 15px 25px;

Individual Sides

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

Common Use Cases

Buttons:

.button {
  padding: 10px 20px; /* More horizontal padding */
}

Cards:

.card {
  padding: 20px; /* Even spacing inside */
}

Containers:

.container {
  padding: 0 15px; /* Side padding only */
}

Border

The border sits between padding and margin, creating a visible edge.

Border Properties

.box {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

Border Shorthand

.box {
  border: 2px solid black;
  /* width | style | color */
}

Border Styles

Individual Sides

.box {
  border-top: 2px solid red;
  border-bottom: 1px dashed gray;
  border-left: none;
  border-right: none;
}

Border Radius (Rounded Corners)

.box {
  border-radius: 10px; /* All corners */
  border-radius: 50%; /* Circle (with equal width/height) */
  border-radius: 10px 20px; /* Top-left/bottom-right | Top-right/bottom-left */
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Perfect circle */
}

Margin

Margin creates space outside the element, between it and other elements.

.box {
  margin: 20px;
}

Key Characteristics

• Margin is always transparent (background doesn’t show)
• Creates space between elements
• Can be negative (pulls elements closer)

Margin Shorthand

Same pattern as padding:

/* All four sides */
margin: 20px;

/* Top/bottom | Left/right */
margin: 10px 20px;

/* Top | Left/right | Bottom */
margin: 10px 20px 15px;

/* Top | Right | Bottom | Left */
margin: 10px 20px 15px 25px;

Individual Sides

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;

Centering with Margin

To center a block element horizontally:

.centered {
  width: 600px; /* Must have a width */
  margin: 0 auto; /* auto on left and right */
}

auto tells the browser to split the remaining space equally.

Margin Collapse

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

/* Space between them = 30px (not 50px!) */

Padding vs Margin

Analogies

Picture frame:

• Padding = The mat (colored border inside the frame)
• Margin = Wall space between frames

Personal space:

• Padding = Your coat’s thickness
• Margin = How far you stand from others

When to Use Which

Use padding when:

• You want background color to extend
• Creating space inside a button or card
• Adding breathing room around text

Use margin when:

• Separating elements from each other
• Centering block elements
• Creating gutters between items

The box-sizing Fix

The Problem

By default, width and height only set the content size. Padding and border are added to that:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}
/* Actual width: 300 + 20 + 20 + 5 + 5 = 350px */

This makes sizing unpredictable!

The Solution: border-box

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}
/* Actual width: 300px (padding and border included) */

With border-box, the width you set is the total width including padding and border.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Universal Reset

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Colors in CSS

CSS offers several ways to specify colors.

color: red;
color: blue;
color: tomato;
color: rebeccapurple;
color: coral;
color: lightgray;

color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */
color: #000000; /* Black (no color) */
color: #ffffff; /* White (all colors) */
color: #808080; /* Gray */

#FF0000 → #F00
#AABBCC → #ABC

color: rgb(255, 0, 0); /* Red */
color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */
color: rgb(128, 128, 128); /* Gray */

color: rgba(255, 0, 0, 1); /* Solid red */
color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
color: rgba(0, 0, 0, 0.3); /* 30% black (for shadows) */

Color Comparison

Color Tools

Typography

Typography is the art of styling text. Good typography dramatically improves readability and aesthetics.

font-family

Specifies which font to use:

body {
  font-family: Arial, Helvetica, sans-serif;
}

Always provide fallbacks in case the first font isn’t available.

Generic Font Families

Always end with a generic family as the final fallback:

font-family: "Roboto", Arial, sans-serif;

Using Google Fonts

Google Fonts provides free, professional fonts.

<head>
  <!-- Google Font BEFORE your stylesheet -->
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
    rel="stylesheet"
  />
  <link
    rel="stylesheet"
    href="styles.css"
  />
</head>

body {
  font-family: "Roboto", sans-serif;
}

font-size

Sets the size of text:

p {
  font-size: 16px; /* Pixels - fixed size */
  font-size: 1rem; /* Relative to root - responsive */
  font-size: 1.2em; /* Relative to parent - cascades */
}

For now, use px. We’ll cover rem and em later.

Common sizes:

• Body text: 14-16px
• h1: 32-48px
• h2: 24-32px
• h3: 18-24px

font-weight

Controls how bold/light text appears:

p {
  font-weight: normal; /* 400 */
  font-weight: bold; /* 700 */
}

h1 {
  font-weight: 300; /* Light */
  font-weight: 400; /* Normal */
  font-weight: 500; /* Medium */
  font-weight: 600; /* Semi-bold */
  font-weight: 700; /* Bold */
  font-weight: 900; /* Black */
}

font-style

p {
  font-style: normal;
  font-style: italic;
}

line-height

Controls spacing between lines of text:

p {
  line-height: 1.5; /* 1.5x the font size - recommended */
  line-height: 24px; /* Fixed value */
  line-height: 150%; /* Percentage of font size */
}

body {
  line-height: 1.6; /* Good readability */
}

letter-spacing

Space between characters:

h1 {
  letter-spacing: 2px; /* Spread out */
  letter-spacing: -0.5px; /* Tighter */
}

text-transform

Changes capitalization:

.uppercase {
  text-transform: uppercase; /* ALL CAPS */
}

.lowercase {
  text-transform: lowercase; /* all lowercase */
}

.capitalize {
  text-transform: capitalize; /* First Letter Of Each Word */
}

text-decoration

Adds lines to text:

a {
  text-decoration: none; /* Remove underline */
  text-decoration: underline; /* Add underline */
  text-decoration: line-through; /* Strikethrough */
}

Complete Typography Example

body {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
}

.subtitle {
  font-size: 18px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #666;
}

Using AI for CSS

AI tools can help you write CSS faster, but always verify and understand the output.

Good Prompt Example

Create CSS for a profile card component:
- 300px wide
- White background (#ffffff)
- 20px padding on all sides
- 10px border radius
- Subtle shadow: 0 2px 10px rgba(0, 0, 0, 0.1)
- Center it on the page
- Use 'Roboto' font
- Name should be 24px, bold, dark gray (#333)
- Title should be 14px, regular, medium gray (#666)

AI Workflow

1. Write a specific prompt with exact values
2. Review every property in the output
3. Test in browser
4. Modify as needed
5. Understand what each property does

Viewing the Box Model in DevTools

Browser DevTools are invaluable for understanding and debugging CSS.

To open: Press F12 or right-click → Inspect

Box model visualization:

1. Select an element in the Elements panel
2. Look for the “Computed” tab
3. You’ll see a visual diagram of margin, border, padding, and content

Key Takeaways

Additional Resources

Box Model

Colors

Typography

Tools

• Browser DevTools - Inspect box model, edit CSS live
• MDN Box Model Diagram - Visual reference