Write the slides

Simple mark-up often enough:

<h1>Title of slide 1</h1>
... content of slide 1

<h1>Title of slide 2</h1>
... content of slide 2

Or, because of limits in current CSS:

<div class=slide>
  <h1>Title of slide 1</h1>
  ... content of slide 1...
</div>

Add style for media=projection

1. Embedded:

   <style media=projection>...</style>

2. Linked:

   <link href="slide.css" media=projection>

3. Inside another style sheet:

   @media projection {...}

Add page breaks

Either

h1 {page-break-before: always}

or

div.slide {page-break-before: always}

Pick a large font

Slides should be readable from a distance:

body {font-size: 40px}

Add more style

Colors, fonts…

body {
  background: #321;
  color: white;
  text-shadow: 1px 1px 4px black }

Backgrounds

One way to make a screen-size background:

html {
  height: 100%;
  background: url(pageframe.png) #321;
  background-size: 100% 100%;
}