Creating presentations/slideshows with HTML & CSS

By Till Halbach

Introduction

An HTML & CSS (or simply HTML) presentation means displaying an HTML or XHTML document in a paged fashion, preferably full-screen mode, even though this is not mandatory. While the technology for that has been with us for a while now, such presentations still suffer from a niche existence ― this might be due to several reasons, including that other solutions are preferred, too few people know it is possible, and that the results of using this technology is believed to be little attractive. Nevertheless, a couple of (rather good and attractive) solutions exist, like HTML Slidy, Slidemaker, and S5, but they either include JavaScript or are a bit cumbersome to use, which is why in this article we will concentrate on plain HTML in combination with CSS.

There are many advantages to using this technology combination to create your slideshows.

1. With an existing template like the examples given below, a presentation is mainly about copying&pasting.
2. You save extra time when republishing web content as a presentation, as the content format and the form of publication are identical.
3. Knowledge of HTML and CSS is sufficient; you do not need to learn an additional markup or scripting language.
4. You can add appropriate styling and effects using CSS.
5. The combination of technologies will become even more powerful with the advent of particular CSS 3 modules.
6. The entire Web is accessible from the presentation (if you are online).
7. No additional software is required.
8. Deployment of additional technologies like JavaScript and SVG gives nearly unlimited possibilities for displaying content, including executing examples inside your slides.
9. Zoom capabilities and fluid layout provide for adaptive readability (one of my favorite arguments).
10. You can (pre-)view the presentation in the default Screen Mode in your browser. I'll get back to that later on.

The key to HTML presentations is to make use of the so-called projection media type as defined in CSS, which by definition is paged. Paged means that only a screen-full of content is shown at a time; thus let us call that a slide.

Support

Concerning browsers, Opera has supported slideshows (also referred to as Opera Show) since version 4. Firefox needs the FullerScreen Add-On to be able to support it, although version 3.0.3 (with FullerScreen) appears to be pretty buggy, so I suggest you stick to Opera, at least for the time being. To my knowledge, neither Safari nor Internet Explorer support it (at the time of writing) or have made plans for future support for slideshows.

You can test yourself whether your browser supports presentation mode here.

To view any web page loaded into Opera in Presentation Mode select View > Full screen or pressing F11 (Opt+F11 on Mac). Pressing ESC (or F11/Opt+F11) terminates the mode.

Our first example

Let's start to look at how to do this, using a simple example. View the basic example in Presentation Mode. Use page-up and -down to flip through the pages/slides.

How does it work? Consider the simple markup below.

<div class="slide">
  Slide 1
</div>
<div class="slide">
  Slide 2
</div>

Each slide is defined using a div with a class value slide. To actually separate the document into slides when in Presentation Mode, I have used a special @media directive in the stylesheet with a value of projection:

@media projection {
  div.slide + div.slide {
    page-break-before: always;
  }
}

This signals that all style rules included in between @media projection { and the last } should only be applied when in Presentation Mode. The rule inside forces a page break before each slide ― you see that the syntax is fairly intuitive. And that's basically it!

Now, to make an appealing presentation, you need to think about styling your slides using CSS and any other technologies you have at your disposal, in the same way you would with any web page. You can see a visually more pleasing piece in the extended example, which is discussed further below.

Breaking pages can of course also be achieved with other properties like page-break-after and page-break-inside. See the pages media specification for a detailed explanation of these.

General presentation considerations

So now you know how to create a basic slideshow, but there are some considerations to bear in mind when creating such presentations. I will cover them in this section.

Unknown projector resolutions

You are usually in complete control of your own computer's resolution, but often you won't know the resolution of the projector unit being used to show your presentation. You need to be prepared for this, as a perfect looking slideshow on your 1280 x 960 screen can be mangled on a projector that only supports 1024 x 768, or 800 x 600. In short, do not assume a fixed slide resolution, and keep the layout fluid ― I cannot exaggerate this last sentence enough. HTML is a dynamic markup language and is by no means about pixel-perfect rendering — and that is an advantage! Your message can be communicated in many layouts, but it's still the same ol' message. You do however need to be careful to test your presentations in a variety of screen resolutions, including 800 x 600 and 1024 x 768. Many projectors support the former these days, with some getting up to the latter.

Use of dual monitors

When writing content for Full-Screen Mode, dual monitors do come in handy - you can edit your documents in your editor on one monitor while you view the presentation in full-screen mode on the other one. Using this setup you are able to reload without losing the current page/slide position.

File organization

If you need your presentation to be contained in a single file, for instance to ease copying, moving, or distribution, you can either embed all external files in the HTML file using data URIs or data URLs, or you can save everything as a web archive file (typical extension .mht) in your browser. The former solution is a bit more fiddly because of the effort it takes, and because it is not convenient in case of changes. Of course, having multiple files on your machine is a bit fiddly, but it's not unusable as long as you maintain a decent directory structure for your files.

An in-depth look at an extended example

As promised, I will now take you through an extended example in more detail. This presentation includes the following features:

• Preview in normal viewing mode (so-called screen media type) with a style of its own
• Title slide
• Slide background
• Logo on each slide
• Slide counter
• Mouse hovering effects
• Slide shortcuts (links to slides)

The presentation's style sheet is divided into several sections. There are style properties applied to all media types, properties applying only to projection and print, and properties solely for print and solely for screen.

The logo

The markup for the logo is as listed here.

<div id="frame">
  <div id="logo">
    <a title="Homepage" target="_blank" href="http://www.example.com"><img alt="Image of our logo" src="logo.png"/></a>
  </div>
</div>

The frame div is a wrapper included for convenience, in case you want to add other elements like presentation title, mail address, etc. in the same area of the slide. The logo element is placed using fixed positioning on each slide, and it is put in front of everything else with an appropriate z-index.

Overall slide structure

Each slide is defined as follows:

<div class="slide">
  <div class="slideContent">
    Slide content
  </div>
</div>

This time I have placed a div of class slideContent inside the outer div. This is needed because I want the slide background to cover the entire slide, but have the slide content in a smaller, inner space, hovering on top of the background. The style snippet below controls this.

div.slide  {
  background: url( "slide_background.png") #fff no-repeat;
  width: 100%;
  height: 100%;
} 
div.slideContent  {
  padding: 2%;
}

The title on the first slide

The vertical centering of the title on the first slide can ― with CSS 2.1 ― only be accomplished by a table-like structure. This is why there are two nested div elements, named titlePage and titlePageContent, on the first slide.

<div class="slide">
  <div class="slideContent">
    <div id="titlePage">
      <div id="titlePageContent">
        ...
      </div>
    </div>
  </div>
</div>

The corresponding style snippet is given below. The #frame + div.slide > div.slideContent selector sets the table display property only for the first slide.

#frame + div.slide > div.slideContent {
  display: table;
}
#titlePage  {
  display: table-row;  
}
#titlePageContent  {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

Overriding default page layout

The slide div has been designated as the container for the slides, and we don't want the html and body to affect the slide layout. We ensure this via the following style rule. If this were excluded from the stylesheet, slides would not fill the entire screen due to the effect of the default browser style sheets.

html, body {
  margin: 0;
  padding: 0;
  width: 100%;  
  height: 100%;
}

Avoiding an unsightly scroolbar

We also have to take care of situations where the content of a slide extends to fill the available space - this applies to both the horizontal and vertical directions. To avoid an unsightly scrollbar appearing, the following rule is used:

div.slide {
  overflow: hidden
}

This addresses only the visual display of the scrollbars; scrolling may be possible even though no scrollbar is shown.

A style for print media type

Also, check out the @page rule in the presentation style - this comes into play when you print the presentation. When printing, you don't want additional space added around the page. This is why both margin and padding are set to zero there.

Styling for all media types

The @media screen section is used for your convenience to show a preview of the presentation ― you will want some different styling when viewing the presentation as a normal web page, but keep it as close to the projection layout as possible, such that an effective preview is possible. Personally, I prefer to have as many style properties as possible in the section common for all media types, and a minimum number of properties in the sections for a particular media type to avoid repetition and to increase consistency.

What font-size to choose?

Finally, I'd like to comment on the style snippet body {font-size: 42px}. You may believe that 42 is the answer, to most things in life, but it is in fact an arbitrary number here. You have to balance readability and space considerations - the bigger the font, the more readable it will be by the audience, but the less content will fit on one slide. Luckily the zooming functionality is pretty mature in both Opera and Firefox, but mind that zooming in will not only increase the font size but also images and other embedded objects.

Zooming will cause the page content to reflow, which is why you have to keep the layout fluid. So the actual value of the font size as given above is not that important because you can adjust the font size with the zoom to suit your or the audience' needs. In addition, reflow zooming is a pretty cool effect that no other presentation application has (to my knowledge) ― at the beginning of your talk you can ask if the audience are able to read your content; if not you can adjust the zoom factor on the fly!

Conclusions

In this article I have demonstrated the basics of creating HTML and CSS presentations, and I provided templates that you can use for your own slideshows.

Combining HTML and CSS for writing presentations is a powerful combination, and it will become even more powerful when the browsers discussed both have complete support for CSS 3 and SVG 1.1. If you know JavaScript on top of that, you can either add your own scripts or make use of any of the seemingly countless libraries, and the possibilities become endless.

Further reading

• Testing projection media type and Browser support matrix for projection media type (the latter not very up to date)
• The Firefox add-on FullerScreen
• See also the links to the other HTML presentation solutions in the Introduction

Till Halbach

Till Halbach wrote his first web page back in 1995. When he is not developing for or researching topics on the Web, creating content for it in regions without any wired or wireless access is his favorite pasttime.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.