The B5 slide style


Bert Bos

User's manual for the B5 (“Brochure 2005”) slide style and projection emulation script

May 24, 2005

Bert Bos <>


Comments go inside a DIV with class “comment” like this one.


During a presentation:


Include these two links:

<link href="../Tools/b5/b5.css">
 rel=stylesheet media=projection

<script src="../Tools/b5/b5.js"

The old w3ctalk-proj.css style can be used instead of b5.css (but looks rather more boring…)


Each slide starts with:

<h1>Title of this slide</h1>

Recommended: add an ID attribute

<h1 id=this-slide>Title of this slide</h1>

First slide

Put these on the first slide

<p class=letterhead><a
 href=""><img alt=W3C

<p class=signature><a href="mailto:...">
 Your Name</a>

<p class=frame><img src="../Tools/b5/pageframe.png"
 alt="" style="width:1px; height:1px">

There are also “pageframe2.png” & “pageframe3.png” →

The pageframe image is a work-around. When browsers improve, this will be done automatically by the style sheet.

The slides will work without the logo (letterhead) and signature, but they are required by our house style.

Alternative: pageframe2

pageframe2.png [image: pageframe2]

Alternative: pageframe3

pageframe3.png [image: pageframe2]


em (<em>) looks emphasized
strong (<strong>) looks strong

em (<em>) looks emphasized
strong (<strong>) looks strong

Special classes: col

To make a 2-column slide, use

<div class=col>... left...</div>
<div class=col>... right...</div>

Special classes: callout

Use <div class=callout>...</div> to make a box with a shadow.

This is a DIV.callout

Special classes: sidebar


<div class=sidebar>

to make a dark blue box on the right side of the slide.

Special classes: extensive

Use <pre class=extensive>...</pre> to make a PRE with slightly smaller fonts, for long code examples.

if (a > b) {
  c = d;
  a = compute(a, b);
} else {
  d = c;
  b = compute(b, a);

Special classes: incremental

The children will be displayed one at a time with every press of the space bar (Javascript only)

<ul class=incremental>
 <li>The first item
 <li>The second item
 <li>The third item

Special classes: overlay

Overlays the images, display images one at a time with every press of the Space bar (Javascript only)

<div class=overlay>
 <img src=... class=first>
 <img src=...>
 <img src=...>

(class=first only necessary for MSIE)

face eyes nose mouth

Special classes: veryshort and short

“Takahashi style” means ultra-short slides with large fonts

<p class=veryshort>Yes!
<p class=short>Clear message


Marking-up code examples

In CODE and PRE, use SPAN for colors

A  keyword  has  <span class=keyword>
A  comment  has  <span class=comment>
A  string   has  <span class=string>
A  dim      has  <span class=dim>

To do

CSS3 Presentation Levels can do the incremental rendering better, but it isn't ready yet…