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.

Featured Partners

Related Articles

View all articles
Daniel Cranney
Tweak CSS Properties Live with slideVars
Every developer knows what it’s like to design - and then code - a quality UI. Hundreds of tweaks, indecision over details, and lots of refreshing to see the changes you’ve made can make it a painful process - even in age of vibe coding and UI librar...
Tweak CSS Properties Live with slideVars
Daniel Cranney
The Overflow: 5 CSS Generators and Visual Design Tools
If you’ve read The Overflow before you’ll know it’s where we take some time you show you our favourite tools from around the web that we simply couldn’t fit into the always-packed Dev Digest. This time, we’re looking at five tools for generating CSS ...
The Overflow: 5 CSS Generators and Visual Design Tools
Daniel Cranney
CSS-Only Scroll-Driven Animations
Scroll-linked animations look slick, but until now it often meant writing a fair amount of JavaScript, scroll event listeners, getBoundingClientRect(), class toggling and so on, with UX benefits often offset by performance downsides. CSS scroll-drive...
CSS-Only Scroll-Driven Animations

From learning to earning

Jobs that call for the skills explored in this talk.

Experience Designer

Cambridge University Press & Assessment
Cambridge, United Kingdom

£39-51K
Scrum
Web Designer

OCLC
Leiden, Netherlands

Intermediate
Adobe Photoshop
Adobe Illustrator
UI-Designer

W3 Digital Brands Gmbh
Konstanz, Germany

Figma
Content Designer

Hachette Learning (formerly Hodder Education)
Charing Cross, United Kingdom

Remote
£30-32K
XML
Figma