This page is powered by a single stylesheet which turns ordinary HTML into a Choose Your Own Adventure-like gamebook, and another that describes its colors. No JavaScript is involved, and the HTML is kept nearly undisturbed.

◀ How to Use It

To use choice.css you'll need to be at least a little familiar with CSS and HTML.

(If you're not comfortable with HTML, consider trying Twine instead. It's got a graphical interface and a simpler markup format. It's also a good choice if you want to do something more complicated than CYOA.)

Writing Your HTML

The first thing you need is a bare HTML page, including choice.css as a stylesheet. (You can also include it inline between a <style>...</style> block.)

<!DOCTYPE html>
<html>
  <head>
    <link rel=stylesheet href=choice.css>
    <title>...</title>
  </head>
  <body>
    <main>
          ...
    </main>
  </body>
</body>

Inside the main block, place a series of <section> elements with your writing, and give them each an id:

<section id=example>
  This is an example section.
</section>

Then inside each section, you can create links to the other sections with standard HTML links:

<section id=other-example>
  This is a <a href='#example'>link to that section</a>.
</section>

Transitions

The three different transition styles you'll see on this page (horizontal pop-in, vertical pop-in, and fade) will be applied automatically to create some variety in transitions.

If you'd like more manual control, you can use the vpop, hpop, and fade classes on your sections, or write your own using standard CSS transitions.

Styling

You can style the rest of the page using CSS normally, as long as you keep the main display structure from choice.css — the absolutely-positioned, overflow-hiding <main> element, and the selectors for <section> elements.

You can also add more elements. For example, this page adds a header with some navigation links. And while JavaScript isn't required, you can include JavaScript code in your page for more advanced effects.

Errors

If you link to a section that doesn't exist, or the reader types one in manually, you'll see the last section in the page even if you didn't give it an ID. You might want to write your last section with this in mind.

◀ Why Bother?

Because...

Modern websites are too complicated. A decade ago, you could open up nearly any site and see how it was made. Now all you get is a mass of minified HTML, CSS, and JavaScript, patching weird features over each other into an unintelligible mess. But today's sites can still be intelligible while doing new things.
Pages can be printed to paper (or PDF) intact.
Bookmarks and sharing links always go to the right part.
It works, in an CPU/energy-efficient way, on a wide variety of browser interfaces and input devices.
The page's full content can be indexed by search engines, the Internet Archive, and other tools and services.
It still works with CSS completely disabled, or in browsers that never supported CSS or JavaScript like Lynx. You'll just see the sections before and after the current one.
Despite their problems, HTML and CSS still strike one of the best balances in computing between ease of writing, ease of learning, and features. The rule of least power remains a good design maxim, and the above are some of its benefits.

◀ Why Not?

It doesn't work in old-but-not-too-old versions of Internet Explorer. (It works in very old versions that don't support CSS or CSS visibility but doesn't work in recently-old versions that support CSS visibility but not CSS transforms.)
It's awkward in some mobile browsers, older ones especially. (But so is almost anything not designed specifically for them.)
Error handling doesn't work very well.
Direct links to the page without a #fragment are the same as an error.
Without more scripting, it can't do anything like track variables or dynamic content. You could write your own JavaScript, but it might be easier to just use Twine if you want to do that.

◀ License

choice.css and this demonstration page are released into the public domain, or as close as possible in your jurisdiction. We waive all our rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

However, we would appreciate it if you kept a link to this page in the file when you use it, to help inform other people about what it does and how they can use it too.

If the target location is invalid, the last section — this section — is displayed, even if it doesn't have an ID. You can put any link you want here, like back to the first section, or just plain back.

It'd be nicer if the default was the first section, or a special section, but that's not currently possible in CSS. At times CSS Selectors Level 4 has included features that would help with this, but they don't work in any browser yet.

Or, you could write your page so that the last section is the first one people should read. But that will mess up the order when printing or reading the page without the special stylesheet. And it's just confusing.