Part 2 • Class Tutorials

Tutorial 4 • Adding Special Effects with HTML/CSS and Sigil

Richard Adams

Sigil (https://sigil-ebook.com) is a free, open-source app for editing ePubs that was developed by Google. An ePub is actually a compressed file with separate folders for its contents. The compressed file can be opened, edited, and saved using Sigil.

Open ePub in Sigil

  1. Copy the ePub file that you created in Tutorial 1.
  2. Launch Sigil and open the .epub file.
  3. Note the structure of the ePub file:
  • Separate folders contain the HTML files, CSS, images, fonts, and media.
  • The text is identified with HTML tags, classes, and IDs.
image
Epub opened in Sigil to show file structure and use of HTML tags and CSS styles.

Style the ePub

  1. Using your knowledge of HTML and CSS to identify objects, apply some innovative styles to the ePub, e.g.:
  • Create a text wrap by adding a “float” style to the image.
  • Create a dropcap on the first paragraph using the p::first-letter selector.

Save your styled ePub and open in iBooks. Compare its appearance with the original.

Instructional Video

License

Icon for the Creative Commons Attribution 4.0 International License

eBook on eBooks Copyright © by Richard Adams is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book