CSS Layout Tutorial

Box Sizing Explained

Content-box vs Border-box

CSS has two different box sizing models that affect how element dimensions are calculated:

content-box (default): Width and height only include the content. Padding and border are added to the total dimensions.
border-box: Width and height include content, padding, and border. Total size remains constant regardless of padding/border changes.

Compare both models below to see how they behave differently when adjusting padding and border!

Box Sizing Comparison

Width Padding Border

content-box

border-box

Live CSS

.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid var(--bs-primary);
}

.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid var(--bs-primary);
}

CSS Box Model

What is the Box Model?

The CSS Box Model is fundamental to web layout. Every HTML element is treated as a box with:

Content: The actual content of the element (text, images, etc.)
Padding: Clear space around the content
Border: A line around the padding
Margin: Space between this element and other elements

Use the controls below to see how these properties affect the layout!

Interactive Box Model

Margin

Padding

Border Width

Content

Live CSS

.example-element {
    margin: 20px;
    padding: 20px;
    border: 5px solid var(--bs-primary);
}

Link Styling

Understanding Link States and Styling

Links are crucial for navigation and interaction. CSS allows us to style links in various states:

Default: Basic link appearance
Hover: When users move their cursor over the link
Active: The moment when users click the link

Below are different techniques for styling links. Notice how they enhance user experience and provide visual feedback!

Link Examples

Default Link

Default Link Style

Underline Animation

Animated Underline

Color Transition

Icon Link

Link Styles CSS

/* Default Link */
.default-link {
    color: var(--bs-primary);
    text-decoration: none;
}
.default-link:hover {
    text-decoration: underline;
}

/* Animated Underline */
.animated-underline {
    position: relative;
    text-decoration: none;
}
.animated-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s;
}
.animated-underline:hover::after {
    width: 100%;
}

/* Color Transition */
.color-transition {
    text-decoration: none;
    transition: color 0.3s ease;
}
.color-transition:hover {
    color: var(--bs-info);
}

/* Icon Link */
.icon-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease;
}
.icon-link:hover {
    transform: translateX(5px);
}

CSS Flexbox Layout

What is Flexbox?

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It's perfect for:

Navigation bars: Organizing menu items
Card layouts: Arranging content in flexible rows/columns
Centering content: Both vertically and horizontally

Key Concepts:

Flex Direction: Defines the main axis (row or column)
Justify Content: Aligns items along the main axis
Align Items: Aligns items along the cross axis

Experiment with the controls below to see how these properties work together!

Interactive Flexbox

Flex Direction: Justify Content: Align Items:

1

2

3

Live Flexbox CSS

.flexbox-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

CSS Grid Layout

Understanding CSS Grid

CSS Grid is a two-dimensional layout system that lets you create complex layouts with rows and columns. It's ideal for:

Page layouts: Creating full page structures
Image galleries: Organizing images in a grid
Dashboard layouts: Arranging widgets and panels

Key Concepts:

Grid Template Columns: Defines the width and number of columns
Grid Gap: Sets spacing between grid items
fr unit: Represents a fraction of available space

Try different column layouts and gap sizes to understand how Grid works!

Interactive Grid

Grid Template Columns: Grid Gap:

1

2

3

4

5

6

Live Grid CSS

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

CSS Animations

Understanding CSS Animations

CSS offers two main ways to create animations:

Transitions: Smooth changes between property values
Keyframe Animations: Complex animations with multiple states

Experiment with the examples below to see how CSS animations work!

Interactive Animations

Animation Type: Duration (seconds): Timing Function:

CSS

Live Animation CSS

.animated-element {
    animation: rotate 1s linear infinite;
}

CSS Property Explorer

Interactive CSS Properties

Experiment with different CSS properties and see their effects in real-time. Complete the micro-challenges to master each property!

Property Controls

Select Property:

Preview Element

Live CSS

/* CSS code will appear here */

Image Sprites

Understanding Image Sprites

Image sprites are a technique where multiple images are combined into a single image file. This approach:

Reduces HTTP Requests: Fewer server requests means faster page loads
Saves Bandwidth: One optimized image instead of multiple separate files
Improves User Experience: Instant hover states with no image loading

Below is the actual sprite sheet image containing all states of our icons:

The Sprite Sheet

This single SVG file contains all icon states (normal and hover):

Each icon is 64x64 pixels. Normal states are in the top row, hover states in the bottom row.

Interactive Sprite Demo

Try it! Hover over each icon to see the sprite animation in action.

CSS Implementation

.sprite {
    width: 64px;
    height: 64px;
    background-image: url('images/sprite-sheet.svg');
    background-repeat: no-repeat;
    transition: background-position 0.3s ease;
}

.home-icon {
    background-position: 0 0;
}
.home-icon:hover {
    background-position: 0 -64px;
}

.email-icon {
    background-position: -64px 0;
}
.email-icon:hover {
    background-position: -64px -64px;
}

.settings-icon {
    background-position: -128px 0;
}
.settings-icon:hover {
    background-position: -128px -64px;
}

Practice Exercises

Hands-on Learning

Download these starter templates and complete the exercises to practice what you've learned!

Box Model Exercise

Practice working with content-box and border-box sizing models. Compare how different box sizing affects element dimensions.

Download Exercise

Flexbox Exercise

Create a responsive layout using flexbox. Practice with flex container properties and alignment.

Download Exercise

Grid Exercise

Build a responsive grid layout that adapts to different screen sizes. Practice with grid template columns and gaps.

Download Exercise

CSS Cheat Sheets

Quick Reference Guides

Download these cheat sheets for quick reference to CSS concepts and properties!

Box Model & Box Sizing

Quick reference for CSS box model properties and box sizing behavior. Includes visual examples and common use cases.

Download Cheat Sheet

Flexbox Layout

Complete guide to Flexbox properties with visual examples. Includes both container and item properties.

Download Cheat Sheet