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>
<style media=projection>...</style>
<link href="slide.css" media=projection>
@media projection {...}
Either
h1 {page-break-before: always}
or
div.slide {page-break-before: always}
Slides should be readable from a distance:
body {font-size: 40px}
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%; }