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...

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


h1 {page-break-before: always}


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 }


One way to make a screen-size background:

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