Håkon Wium Lie

How to write a book with CSS

Could you typeset an entire book using only CSS? Discover the advanced properties for page numbers, margins, and professional print layouts.

How to write a book with CSS
#1about 3 minutes

The origins of CSS at CERN

CSS was created at CERN to separate presentation from HTML content, addressing the early web's need for basic styling like fonts and colors.

#2about 8 minutes

Evolving CSS from basic styles to advanced effects

CSS grew from simple font and color properties to include powerful features like text shadows, border radius, and declarative animations, reducing the need for JavaScript.

#3about 4 minutes

Applying CSS to book design and typography

Beyond screens, CSS has a crucial role in preserving the art of book typography, enabling the creation of printed materials directly from web technologies.

#4about 2 minutes

Mastering pagination and page layout for print

The @page rule in CSS allows for defining page size, margins, and adding dynamic page numbers to create professional book spreads.

#5about 4 minutes

Advanced figure and image placement in print

Extended float and clear properties enable precise placement of figures relative to the page, column, or spread, such as floating to the top or outside edge.

#6about 4 minutes

Deferring content and creating full-bleed spreads

Use defer properties to place elements on specific pages or columns, and combine this with negative margins to create seamless images that span across a two-page spread.

#7about 3 minutes

Refining typography and the challenge to write a book

Use the text-replace property for high-quality typography and take on the challenge of writing and formatting your own book with HTML and CSS.

#8about 12 minutes

Q&A on CSS history, design, and print standards

The discussion covers the impact of CSS on employment, convincing designers to use web standards, its relationship to LaTeX, and the future of print-specific properties.

Related jobs
Jobs that call for the skills explored in this talk.

job ad

Saby Company
Delebio, Italy

Intermediate

test

Milly
Vienna, Austria

Intermediate

Matching moments

Using modern CSS for advanced typographic control
29:47 MIN

Using modern CSS for advanced typographic control

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

The origins of CSS and typographic inspiration
00:12 MIN

The origins of CSS and typographic inspiration

Can CSS recreate Tufte's designs?

Proposing new CSS for advanced page floats
09:34 MIN

Proposing new CSS for advanced page floats

Can CSS recreate Tufte's designs?

Discussion on the evolution and future of CSS
41:29 MIN

Discussion on the evolution and future of CSS

What's new in CSS for Designers?

Recreating basic book layouts with paged media
05:08 MIN

Recreating basic book layouts with paged media

Can CSS recreate Tufte's designs?

Improving typography and layout with modern CSS properties
10:52 MIN

Improving typography and layout with modern CSS properties

What’s New and What’s Next in Web UI

The evolution of CSS layout from tables to grid
01:59 MIN

The evolution of CSS layout from tables to grid

Kirsty's Excellent Adventure in CSS Grid

Core techniques for writing robust and resilient CSS
10:26 MIN

Core techniques for writing robust and resilient CSS

Future-Proof CSS

Featured Partners

Related Videos

See all videos
Can CSS recreate Tufte's designs?28:00

Can CSS recreate Tufte's designs?

Håkon Wium Lie

Future-Proof CSS37:55

Future-Proof CSS

Ire Aderinokun

Is CSS Houdini finally usable in 2023?29:40

Is CSS Houdini finally usable in 2023?

Tanja Ulianova

What's new in CSS for Designers?59:20

What's new in CSS for Designers?

Onur Gumus

What’s New and What’s Next in Web UI22:46

What’s New and What’s Next in Web UI

Cleyra Uzcategui

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements09:04

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements

Dan Cranney

The State Of The Web43:11

The State Of The Web

Jeremy Keith

Playing Games with CSS44:29

Playing Games with CSS

Elad Shechter

Related Articles

View all articles
DC
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?
CH
Chris Heilmann
Dev Digest 133 - Back to Front
News and ArticlesWeAreDevelopers LIVE WebDev Day is on Wednesday, 18/11/2024. Learn about Design-first APIs for UI components, the JavaScript event loop, the Secret sauce behind pattern matching and Vision for websites as well as win a chance to take...
Dev Digest 133 - Back to Front
DC
Daniel Cranney
Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors
CSS is an essential part of web development. Regardless of which programming language you use, the chances are you know some CSS, too. In this article we're going to help you go beyond the basics and explore the power of pseudo elements and pseudo se...
Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors
LM
Luis Minvielle
Top 7 CSS Frameworks in 2025
What is a CSS framework?A CSS framework comprises multiple ready-to-use CSS libraries for developers and web designers. The stylesheets are prepared for everyday tasks in web design, such as the navbar, font, colour, and layout setup. They simplify t...
Top 7 CSS Frameworks in 2025

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
Web Designer

Web Designer

OCLC

Intermediate
Adobe Photoshop
Adobe Illustrator