Chapter 1: Introduction

This starter publication demonstrates a clean EPUB 3 file structure using XHTML content, CSS styling, navigation, tables, internal links, and references.

Replace the sample text with publication content while preserving the package structure and updating the package metadata.

The bordered boxes show source code as text. Put XHTML examples in a content file, CSS examples in the stylesheet, and package examples in CONTENT.OPF. Labels distinguish complete examples from excerpts.

1. The complete XHTML page structure

XHTML — complete minimal chapter, using this template’s stylesheet

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:epub="http://www.idpf.org/2007/ops"
      xml:lang="en-CA" lang="en-CA">
<head>
  <title>Chapter 1: Introduction</title>
  <link rel="stylesheet" type="text/css"
        href="../STYLES/SGC-MAIN.css"/>
</head>
<body epub:type="bodymatter">
  <h1 class="chapter-title">Chapter 1: Introduction</h1>
  <section id="welcome">
    <h2>Welcome</h2>
    <p>Begin your book here.</p>
  </section>
</body>
</html>

The XML declaration identifies the syntax and UTF-8 encoding. The html element encloses the page; xmlns gives its XHTML namespace. xmlns:epub enables the epub: attributes. Both language attributes here specify Canadian English.

The head holds document information; title names this individual document. The body contains the reading content. The epub:type value bodymatter identifies its place in the book. Closing tags finish their matching elements; the empty link element ends with />.

The h1 gives the main heading. A section groups related material, its id supplies a possible link target, h2 starts a subsection, and p holds a paragraph. The real chapter adds the navigation menus explained in Chapter 3 and the teaching sections you are reading.

2. Connect the stylesheet with href

XHTML — place inside head

<link rel="stylesheet" type="text/css"
      href="../STYLES/SGC-MAIN.css"/>

rel="stylesheet" describes the connection; type="text/css" identifies CSS. The attribute is spelled href, with one final f. Here its destination goes up from OEBPS/EPUB/ to OEBPS/, then into STYLES/. A link element loads a resource; the a element in Chapter 3 creates a reader-followed hyperlink.

3. The book’s metadata

OPF — actual metadata section from this revision

<metadata xmlns="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <dc:identifier id="bookid">urn:uuid:d0df30e6-b94c-4fb7-9ff6-f7ac770d0dc0</dc:identifier>
    <dc:title>TrustScottWorks EPUB 3 Template</dc:title>
    <dc:creator>Trust Scott Works</dc:creator>
    <dc:language>en-CA</dc:language>
    <dc:publisher>Trust Scott Works</dc:publisher>
    <dc:date>2026-09-05</dc:date>
    <dc:subject>EPUB 3 publishing template</dc:subject>
    <meta property="dcterms:modified">2026-09-10T15:57:23Z</meta>
  </metadata>

This excerpt belongs inside the package element of CONTENT.OPF. Its namespace declarations identify OPF and Dublin Core names. The dc: prefix is part of that naming system.

dc:identifier and id="bookid": the publication identifier and the local name referenced by package’s unique-identifier attribute. Choose a new publication identifier for your new book.
dc:title and dc:creator: the library title and author credit.
dc:language: the book’s language code.
dc:publisher, dc:date, and dc:subject: publisher, publication date, and subject description.
meta property="dcterms:modified": the revision timestamp. Its Z suffix indicates UTC. This is separate from the publication date.

Change the visible title page and the metadata together. The sample publication date remains the original template date; the modification field records this revision.

4. Register content and set reading order

OPF — excerpts inside the existing manifest and spine

<manifest>
  <item id="chap01" href="EPUB/CHAP-01.xhtml"
        media-type="application/xhtml+xml"/>
  <item id="nav" href="EPUB/NAV.xhtml"
        media-type="application/xhtml+xml" properties="nav"/>
  <item id="css" href="STYLES/SGC-MAIN.css"
        media-type="text/css"/>
</manifest>
<spine>
  <itemref idref="chap01"/>
</spine>

These excerpts show only selected entries; keep the other entries in the real package. The manifest lists resources. Each item has an id, path in href, and media-type. The nav property identifies the Contents document. The spine uses itemref and idref to refer to registered documents in reading order. The CSS resource is registered but is not a reading-order page.

See Chapter 5’s assembly example for adding a chapter without removing existing entries.

5. Headings, paragraphs, and reusable classes

Rendered example

Example section heading

A normal paragraph with important words and emphasized words.

This paragraph uses the indent class.

This paragraph has no first-line indent.

XHTML — code producing the example above

<h2>Example section heading</h2>
<p>A normal paragraph with <strong>important words</strong>
and <em>emphasized words</em>.</p>
<p class="indent">This paragraph uses the indent class.</p>
<p class="non-indent">This paragraph has no first-line indent.</p>

strong marks importance and em marks emphasis. The class attribute selects reusable styles. h1, h2, and h3 describe heading levels; their visible size is set separately in CSS. This chapter uses h1 for its title, h2 for teaching sections, and h3 for rendered-example labels.

CSS — actual basic text rules

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
  margin: 5%;
  color: #222;
  background: #fff;
}
h1, h2, h3 { line-height: 1.2; color: #18283d; }
h1 { font-size: 2em; margin: 1em 0 .5em; }
h2 { font-size: 1.45em; margin: 1.25em 0 .5em; }
p { margin: .7em 0; }
a { color: #1b5a87; }
.book-title { font-size: 2.4em; font-weight: 700; text-align: center; }
.chapter-title { font-size: 2em; font-weight: 700; }
.bold { font-weight: 700; }
.italics { font-style: italic; }
.indent { text-indent: 2em; }
.non-indent { text-indent: 0; }

Each selector precedes braces containing property: value declarations. Semicolons separate declarations. A comma groups selectors, while a leading dot selects a class.

body: requests Arial, Helvetica, then a sans-serif fallback; sets line spacing to 1.55, outer margins to 5%, and dark text on white.
h1, h2, h3: share line spacing and colour. The h1 and h2 rules set sizes and margins. In a three-value margin, the values mean top, left/right, then bottom.
p and a: set paragraph spacing and link colour.
.book-title and .chapter-title: set display sizes and bold weight; the book-title class also centres text.
.bold and .italics: apply visual weight or slant. They do not add the meaning of strong or em.
.indent and .non-indent: add or remove the first-line indent.

em sizes follow the relevant font size; percentages are relative measurements. A # followed by colour digits is a colour value here, whereas # in a link introduces an id target. Reader settings can affect the final appearance.

6. Make these bordered code examples

XHTML — display markup as text

<pre class="assembly-code"><code>
&lt;p&gt;A sample paragraph.&lt;/p&gt;
</code></pre>

CSS — actual code and border rules

code { font-family: monospace; overflow-wrap: anywhere; }
.assembly-code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85em; line-height: 1.45; padding: .8em; border: 1px solid #bbb; }

pre preserves source spacing, code identifies computer code, and assembly-code applies the box. To display a tag rather than execute it, write < for < and > for >. Write & for an ampersand. The source of the example above therefore contains escaped markup.

font-family: monospace aligns characters. white-space: pre-wrap preserves indentation while allowing wrapping, and overflow-wrap: anywhere permits long strings to break. font-size and line-height set text size and line spacing. padding puts space inside the box; border draws its thin solid grey outline. Long examples may continue across reading pages.

The label above each box is an ordinary paragraph with class="example-label". Its CSS is shown below.

CSS — example label rule

.example-label { font-weight: 700; margin: 1em 0 .35em; }

Source guide

These examples use this template’s files. Further technical detail: W3C EPUB, HTML document structure, HTML tables, and CSS text layout.