A FRONT-END WORKSHOP

Learning the fundamentals of CSS and applying them in your very own CSS Zen Garden project

Women Coders · 2026

Becoming Zen with CSS

Rhiana Heppenstall - Accessibility Lead

slides.com/rhianaheppenstall/zen-with-css

Geometric white building against a pale sky

00 — RATIONALE

Why CSS Zen Garden?

The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.

FIG. 1 — Public Domain Cherry Blossoms

INDEX

The outline

May jump around a bit

01

02

03

04

05

The Set-Up

Getting the Zen Garden showing in your browser

The Text and Color

How and where to add colour

The Box Model

How the browser sees it

The Layout

How to position elements

The Demo

Example garden you can follow or make your own!

CHAPTER

ONE

01

01 - SET-UP

Getting set up

01 — SET-UP

What to do

STEP 01

STEP 02

STEP 03

STEP 04

Download HTML

csszengarden.com

Text Editor

Browser test

Set up CSS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS Zen Garden: The Beauty of CSS Design</title>

	<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="Dave Shea">
	<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
	<meta name="robots" content="all">


	<!--[if lt IE 9]>
	<script src="script/html5shiv.js"></script>
	<![endif]-->
</head>

<body id="css-zen-garden">
  <div class="page-wrapper">

	<section class="intro" id="zen-intro">
		<header role="banner">
			<h1>CSS Zen Garden</h1>
			<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
		</header>

		<div class="summary" id="zen-summary" role="article">
			<p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
			<p>Download the example <a href="/examples/index" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">css file</a></p>
		</div>

		<div class="preamble" id="zen-preamble" role="article">
			<h3>The Road to Enlightenment</h3>
			<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
			<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
			<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
		</div>
	</section>
 ...

Base:

  1. Add in style tags between html and body
    1. Basic reset CSS

Style tags

</head>

<style>
	body {
		margin: 0;
	}
</style>

<body>

Plus:

  1. Add in full CSS reset code

DEFINITION

CSS

Cascading  

Style

Sheets

EXAMPLE

Inverted Triangle

RESET

ELEMENTS

CLASSES

COMPONENTS

!IMPORTANT

  1. blue
  2. pink
  3. something else

What colour will the text be?

p {
  color: blue;
}

p {
  color: pink;
}
  1. blue
  2. pink
  3. something else

What colour will the text be?

p.text {
  color: blue;
}

p {
  color: pink;
}

Examples only!
Not best Practice

CHAPTER
TWO

02

02 - TEXT AND COLOUR

Text and Colours

02 - TEXT AND COLOUR

Main Rules for Text

I.

II.

III.

font-family

font-size
line-height

font-weight
font-style
text-decoration

Base:

  1. Add in two websafe font families

Font Families

html, body {
  font-family: Palatino, 'Book Antiqua', Georgia, serif;
}


h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, Geneva, sans-serif;
}

Plus:

  1. Add in two custom imported font families

Font Size

html {
  font-size: 16px;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.5rem;
}

Base:

  1. Pick a base font size in pixels
    1. px
  2. Add some example sizes shown
    1. rem

Plus:

  1. Test out some different units
    1. em, %, vh, vw
  2. Generate your own font sizes
    1. baseline.is/tools/type-scale-generator

Line Height

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}

p, ul li, ol li {
  line-height: 1.5;
}

Base:

  1. Pick a base line height ratio
    1. Between 1 and 2
  2. Headings should be shorter than body

Plus:

  1. Use the calculator to find best heights
    1. calculator.academy/line-height-calculator

Font Weight

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

p, ul li, ol li {
  font-weight: 400;
}
Key wordNumber
normal400
bold700
thin100
black900

Base:

  1. Add in some base font-weights
    1. Keywords or numbers

Plus:

  1. Test out different font-weights to see what your font can render
    1. ditig.com/css-font-weight-cheat-sheet
    2. Hint: It can only render what has been loaded

02 - TEXT AND COLOUR

Main Rules for Colour

I.

II.

III.

color

background-color

border

Color

html, body {
  color: black;
}

h1, h2, h3, h4, h5, h6 {
  color: #5F1A37;
}

p {
  color: hsl(177, 39%, 32%);
}

a {
  color: rgb(72, 63, 80);
}

Base:

  1. Add in some example colours
    1. hex, rgb, hsl, keyword

Plus:

  1. Generate your own colour scheme
    1. coolors.co
  2. Test out other text properties
    1. text-shadow, opacity (rgba)

Background Color

html, body {
  background-color: #F5F4F6;
}

header {
  background-color: #9BCFE8;
}

footer {
  background-color: #ACB2D8;
}

aside {
  background-color: #BFEDE2;
}

Base:

  1. Add in some example background
    1. hex, rgb, hsl, keyword

Plus:

  1. Test out other background properties
    1. box-shadow, gradients, background images
    2. cssgradient.io

Border Color

header {
  border: 1px solid #267EA6;
}

footer {
  border-width: 1px;
  border-style: dashed;
  border-color: #3B447D;
}

aside {
  border-width: 5px;
  border-style: dotted;
  border-color: #288F77;
}

Base:

  1. Add in some example borders
    1. Style and width first
    2. hex, rgb, hsl, keyword

Plus:

  1. Test out other border properties
    1. border-radius, single side
  2. Add an outline

CHAPTER
THREE

03

Box Model

03 - BOX MODEL

girldevelopit.github.io/gdi-featured-html-css-intro/class3.html

Content

Padding

Border

Margin

03 - BOX MODEL

Three boxes per element

I.

II.

III.

content

padding

margin

Content

header {
  height: 150px;
}

footer {
  height: 3rem;
  width: 80%;
}

.explanation,
.participation {
  display: inline-block;
  border: 1px solid black;
  width: 49%;
}

Base:

  1. Pick an element
    1. Add a height and width
    2. px, rem, %
  2. Hint: adding some colour will help you visualise

Plus:

  1. Test out with different display options
    1. block, inline-block and inline

Padding

aside {
  padding: 3%;
}

footer {
  padding: 15px;
}

.main {
  padding: 3rem;
  background-color: #EED2AA;
}

header {
  padding: 20px 0 1rem 0;
}

Base:

  1. Pick an element
    1. Add padding
    2. px, rem, %

Plus:

  1. Test out with different display options
    1. block, inline-block and inline
  2. Add padding to 1, 2 or 3 sides only

Margin

h1, h2, h3, p {
  margin-bottom: 0.5em;
}

.summary {
  margin: 100px;
}

ul {
  margin: 2rem;
  background-color: #E3E4F2;
  border: 1px solid black;
}

Base:

  1. Pick an element
    1. Add margin
    2. px, rem, %
  2. Hint: adding a border will help you visualise

Plus:

  1. Test out with different display options
    1. block, inline-block and inline
  2. Add margin to 1, 2 or 3 sides only

What did you discover?

Display Table

PropertySizePaddingMarginDirection
inlineNoLeft/Right only*Left/Right only*Left to right
blockYesYesYesUp to down
inline-blockYesYesYesLeft to right

dev.to/angelocodes/mastering-the-box-model-in-css-block-vs-inline-267n

* top and bottom are kind of applied but go outside the alignment of the parent

CHAPTER

FOUR

04

Layout

04 - LAYOUT

04 - LAYOUT

Three different layouts

I.

II.

III.

position

flex

grid

Position

header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}

footer {
  position: relative;
  bottom: 10rem;
  left: 50%;
}

Base:

  1. Pick an element
    1. Add a position type and co-ordinates

Plus:

  1. Test out with different position options
    1. absolute, block, relative, sticky
    2. add some z-index

Flex

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

Base:

  1. Pick an element
    1. Add flex to create a layout

Plus:

  1. Test out with different options
    1. flex-direction, flex-reverse,
      justify-content, align-items
  2. flexboxfroggy.com

Grid

aside .wrapper {
  display: grid;
  grid-template-columns: 1fr 20% 250px;
  gap: 1rem;
}

Base:

  1. Pick an element
    1. Add grid to create a layout

Plus:

  1. Test out with different options
    1. grid-template-area
  2. cssgridgarden.com

CHAPTER

FIVE

05

Demo

05 - DEMO

Thank
you.

Rhiana Heppenstall - Accessibility Lead 3P Learning

Zen with CSS

By RhianaH

Zen with CSS

  • 42

More from RhianaH