CSS3 - Styling & Layout

Master the Art of Beautiful Web Design

Box Model Flexbox CSS Grid Responsive

CSS Selectors & Specificity

CSS selectors target HTML elements for styling. Understanding specificity helps predict which styles win.

Element Selector
p { color: blue; }
Targets all <p> elements
ID Selector
#header { background: gray; }
Highest specificity (id="header")
Class Selector
.container { padding: 20px; }
Medium specificity (class="container")
Attribute Selector
[type="text"] { border: 1px solid; }
Targets elements with specific attributes
Specificity Hierarchy

Inline styles (1000) > ID selectors (100) > Classes/Attributes (10) > Elements (1)

The CSS Box Model

Every HTML element is a box with: margin, border, padding, and content.

Margin (outside border, creates space between elements)
Border (edge of the element)
Padding (space between border and content)
Content (text, images)
.box {
  margin: 20px;
  padding: 15px;
  border: 2px solid blue;
  width: 200px;
  box-sizing: border-box;
}
Pro Tip: box-sizing: border-box

Always use box-sizing: border-box to include padding/border in the element's width. No more overflow issues!

Flexbox - One Dimensional Layout

Flexbox is perfect for row or column layouts. It's your go-to for aligning items and creating responsive designs.

Container Properties
Property Values Purpose
display: flex flex, inline-flex Enables flexbox
flex-direction row, column, row-reverse, column-reverse Main axis direction
justify-content flex-start, center, space-between, space-around Align along main axis
align-items stretch, flex-start, center, baseline Align along cross axis
flex-wrap nowrap, wrap, wrap-reverse Allow items to wrap
gap 10px, 1rem, 5% Space between items
Live Examples
justify-content: center
1
2
3
justify-content: space-between
1
2
3
align-items: center
1
2
3
flex-wrap: wrap
1
2
3
4
5
6
Item Properties

flex-grow - How much item grows (default 0)

flex-shrink - How much item shrinks (default 1)

flex-basis - Initial size before growing/shrinking

CSS Grid - Two Dimensional Layout

CSS Grid is perfect for complex, two-dimensional layouts (rows AND columns).

Container Properties
Property Values Purpose
display: grid grid, inline-grid Enables CSS Grid
grid-template-columns 1fr 1fr 1fr, repeat(3, 1fr) Define column sizes
grid-template-rows auto, 100px, 1fr Define row sizes
gap 20px, 1rem Space between rows/columns
grid-template-areas "header header", "sidebar main" Name grid areas
Grid Example
1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
When to Use What?

Flexbox: Navigation bars, card layouts, centering elements, one-dimensional layouts

Grid: Page layouts, dashboards, magazine-style grids, complex two-dimensional layouts

Responsive Design with Media Queries

Make your website look great on all devices - phones, tablets, and desktops.

/* Base styles (mobile-first) */
.container {
  width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    width: 1200px;
  }
}
Common Breakpoints
Desktop (min-width: 1024px)
Tablet (min-width: 768px)
Mobile (max-width: 767px)
Viewport Meta Tag

Always include this in your HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Variables (Custom Properties)

Define reusable values throughout your CSS. Change them once, update everywhere!

/* Define variables in :root */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
  --spacing-md: 1rem;
}

/* Use variables */
.button {
  background: var(--primary-color);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
}
Why Use CSS Variables?
  • Easy theme switching (light/dark mode)
  • Single source of truth for colors, spacing, fonts
  • Dynamic theming with JavaScript
  • Consistent design system

Animations & Transitions

Add movement and interactivity to make your websites feel alive.

Transitions

Smoothly change properties over a duration.

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
  background: red;
}
Keyframe Animations

Create complex multi-step animations.

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.element {
  animation: bounce 1s infinite;
}
Bounce Animation
Animation Properties

animation-name - Name of @keyframes

animation-duration - How long (1s, 500ms)

animation-timing-function - ease, linear, ease-in-out

animation-iteration-count - number or infinite

Practical Exercise

Build a Responsive Landing Page

Requirements:

  • Use Flexbox for navigation (logo + menu)
  • Use CSS Grid for feature cards (3 columns on desktop)
  • Mobile-responsive layout with media queries
  • CSS variables for colors and spacing
  • Hover transitions on buttons and cards
  • Smooth scroll behavior
Resources: Flexbox Guide Grid Guide
Previous: HTML5 Next: JavaScript