the beauty behind ebooks: css - ebookcraft 2015 - iris febres
TRANSCRIPT
![Page 1: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/1.jpg)
Iris Amelia Febres ebookcraft March 10, 2015 #ebookcraft
THE BEAUTY BEHIND EBOOKS: CSS
![Page 2: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/2.jpg)
#ebookcraft
WHO AM I?
![Page 3: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/3.jpg)
#ebookcraft
A BIO IN 5 MINUTES• Live near Boston, Massachusetts after
foolishly transplanting from Miami
• M.A. in Writing & Publishing from Emerson College (2012 — Go Lions!)
• Worked on ebooks at O’Reilly & F+W Media
• Currently Director, Solutions Architecture at Aptara
• Teach ebook production at Emerson College’s graduate program
• Dabble in doodles & comics, love corgis
![Page 4: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/4.jpg)
#ebookcraft
http://thewithouse.com/wp-content/uploads/2013/11/corgi-3.jpg
![Page 5: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/5.jpg)
#ebookcraft
WORKSHOP STRUCTURE• 2.5 hours* of CSS goodness
• Half “lecture,” half lab • Three parts
• Open questions for discussion • Reviewing samples, etc.
• Simple exercises
• *15-minute break in-between
![Page 6: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/6.jpg)
#ebookcraft
WORKSHOP MATERIALSDownload the following materials for this workshop at
irisamelia.com/ebookcraft2015 ebookcraft_exercises.zip
Tools: • EPUBcheck (e.g., EPUB-Checker/Pagina) • Zip/Unzip scripts for EPUBs • iBooks/ADE/iPad (use Dropbox)
![Page 7: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/7.jpg)
#ebookcraft
TIERS OF CSS WE’LL REVIEW
• Simple reflowable (Fiction, novels)
• Complex reflowable (Nonfiction, cookbooks)
• Fixed Layout (CSS3 Animation)
![Page 8: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/8.jpg)
#ebookcraft
CSS IN 5 SECONDS
p { color: purple; }
selector
property
value
![Page 9: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/9.jpg)
#ebookcraft
THINKING OF “EBOOK BEAUTY”
• What makes an ebook beautiful ? • 2 approaches:
• Beautiful rendering • Beautiful markup
!
• How do we put them together?
![Page 10: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/10.jpg)
#ebookcraft
KEY THEMES
• Consistency
• Clarity
• Simplicity
Applies to what’s presented to the reader and what’s under the hood.
![Page 11: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/11.jpg)
#ebookcraft
PART ONE: LET’S TALK ABOUT RENDERING
![Page 12: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/12.jpg)
#ebookcraft
PART ONE: RENDERING
• Open question: What immediately comes to mind when I mention “beautiful/lovely/gorgeous rendering”?
• We think of aesthetic • Design • How it looks
![Page 13: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/13.jpg)
#ebookcraft
PART ONE: RENDERING
• Open question: Do we associate this notion of “ebook beauty” to particular genres?
Cookbooks / Nonfiction / Fiction / Poetry
![Page 14: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/14.jpg)
#ebookcraft
RENDERING IS ABOUT HOW THE TEXT PRESENTS ITSELF.
* Word and Image — everything we read and absorb
![Page 15: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/15.jpg)
#ebookcraft
COMMON DESIGN ELEMENTS
FONTS
Text size
Hierarchy
Line height S p a c i n g
Dingbats & flourishes
Borders & rules
Weight & Color
Alignment
[Images]
![Page 16: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/16.jpg)
#ebookcraft
“A GREAT UI IS INVISIBLE.” —PATRICK COX
http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/
![Page 17: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/17.jpg)
#ebookcraft
WHAT DOES AN EBOOK’S “UI” DO?
• Establishes a tone for your ebook (branding)
• Establishes relationships with and within the content (hierarchy)
• Establishes a connection to the user (reader)
![Page 18: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/18.jpg)
#ebookcraft
DOWN TO THE DETAILS
Successful ebooks are all about the details, specifically, the elements the reader doesn’t necessary explicitly acknowledge
• Subtle • Warranted for the content
![Page 19: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/19.jpg)
#ebookcraft
![Page 20: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/20.jpg)
#ebookcraft
RESOLVE WITH REFLOWABLE
• We do not have page-by-page design available (yet) to us, so flexibility is key
• Reflowability comes with a double-edged sword
• However, we should take advantage of robust rendering engines (i.e., iBooks)
![Page 21: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/21.jpg)
#ebookcraft
OPPORTUNITIES FOR DETAILS TYPICAL EXAMPLES
• Dropcaps and initial lines
• Chapter headers with dingbats
• Journal entries or other passages with embedded fonts
• Line spacing for running text
• Margins & padding for running text
![Page 22: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/22.jpg)
#ebookcraft
DROPCAPS & INITIAL LINES
Why it’s important • Opportunity for print fidelity (are you happy now, editors!?)• Attention to detail
CSS: • float:;, line-height:;, font-variant:; http://www.magazinedesigning.com/wp-content/uploads/2013/07/drop-caps-initials-2.png
![Page 23: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/23.jpg)
#ebookcraft
span.dropcap { float: left; /** Allows for the reflow **/ font-size: x-large; line-height: 1; padding-right: .10em; }
h1 + p:first-letter { float:left; font-size:2.7em; line-height:0.8em; margin-bottom:-0.1em }
![Page 24: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/24.jpg)
#ebookcraft
CHAPTER HEADERS
Why it’s important: • A chance for pizzazz • Additional emphasis on the hierarchy• “Low-cost” supplement
CSS: • font-size:;• text-align:;• color :;• border (top and bottom)
![Page 25: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/25.jpg)
#ebookcraft
![Page 26: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/26.jpg)
#ebookcraft
![Page 27: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/27.jpg)
#ebookcraft
PASSAGES/TEXT BLOCKS (E.G., JOURNAL ENTRIES)
Why it’s important • Distinguishes running text from segmented text• Opportunity for enhancing the narrative (and UX) with fonts etc.
CSS: • block (<div>/<section>) to block off the letter itself• text-indent:; for paragraphs• margin/padding:; for spacing relative to the running text• line-height:;,
![Page 28: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/28.jpg)
#ebookcraft
![Page 29: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/29.jpg)
#ebookcraft
RUNNING TEXT LINE HEIGHT & WORD SPACING
Why it’s important: • Controls space between lines of text, space between letters (respectively)• Gives your text breathing room • Makes your text more legible — but also allows for greater densityCSS: line-height:; / letter-spacing:; Value has no unit so that it is proportional to the font size
![Page 30: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/30.jpg)
#ebookcraft
RUNNING TEXT MARGIN & PADDING
Why it’s important: • Gives your text breathing room• Gives you more control of the pageCSS: • margin:; — outside• padding:; — inside
http://www.kuahla.com/learnhtml/images/boxmodel.gif
![Page 31: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/31.jpg)
#ebookcraft
https://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9.jpg
![Page 32: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/32.jpg)
#ebookcraft
RECAP: RENDERING
• What does this CSS demonstrate?
• Care for the content • Care for the reader
![Page 33: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/33.jpg)
#ebookcraft
RECAP: RENDERING
• Attention, thought, and execution brings readers back to an ebook — or, arguably, its provider (cough you great developer you)
• It makes the book memorable, beyond the content itself
![Page 34: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/34.jpg)
#ebookcraft
WHAT CATCHES YOUR ATTENTION?
![Page 35: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/35.jpg)
#ebookcraft
PART TWO: LET’S TALK ABOUT MARKUP
![Page 36: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/36.jpg)
#ebookcraft
SWITCHING GEARS GOING UNDER THE HOOD
![Page 37: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/37.jpg)
#ebookcraft
BENEATH THE SURFACE
• Successful implementation of CSS depends on the foundation laid in the source HTML.
• You can’t style clutter!
• You need beautiful markup.
![Page 38: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/38.jpg)
#ebookcraft
WHAT DOES BEAUTIFUL MARKUP NEED?
• Semantic
• Efficient
• The Cascade
![Page 39: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/39.jpg)
#ebookcraft
BEAUTIFUL MARKUP IS SEMANTIC
• Why semantics are important: • Standards • Ethics • Sanity
![Page 40: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/40.jpg)
#ebookcraft
THE BEAUTY OF AN EBOOK LIES IN HOW A READER
EXPERIENCES IT.
![Page 41: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/41.jpg)
#ebookcraft
BEAUTIFUL MARKUP IS SEMANTIC
• Thoughtful breaking up of the content
• Thinking of function for complex books • Scenario to consider : Slow page turns
• Open question: When should semantics be put on the back-burner? Should it ever?
![Page 42: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/42.jpg)
#ebookcraft
BEAUTIFUL MARKUP IS EFFICIENT
• Efficient markup does the work for you • Remember The First Virtue of a Great
Programmer
• Templates
• Maintainability
![Page 43: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/43.jpg)
#ebookcraft
BEAUTIFUL MARKUP CASCADES.
![Page 44: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/44.jpg)
#ebookcraft
![Page 45: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/45.jpg)
#ebookcraft
THE MUST-HAVES OF A CSS DOCUMENT
• Organization (emphasis on The Cascade)
• The minimum required (conciseness — exception for templates)
• Comments for your reference (information on when it was last edited)
![Page 46: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/46.jpg)
#ebookcraft
BUT AT THE END OF THE DAY, YOU NEED GOOD MARKUP.
![Page 47: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/47.jpg)
#ebookcraft
RECAP: MARKUP
foundation
finesse
![Page 48: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/48.jpg)
#ebookcraft
PART THREE: WHAT DO WE DO NOW?
![Page 49: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/49.jpg)
#ebookcraft
QA, QA, QA TEST, TEST, TEST
DRINK, DRINK, DRINK
![Page 50: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/50.jpg)
#ebookcraft
QA METHODS• Commenting out CSS rules for testing
(/** Comment here **/)
• Platform checks
• Deleting and re-adding EPUBs to iBooks (desktop); curséd caching
• Rely on Dreamweaver (Live/Design) sparingly
![Page 51: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/51.jpg)
#ebookcraft
DEGRISTLING THE SAUSAGE 2.0 COURTESY OF INDIA AMOS, AMPLIFY
![Page 52: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/52.jpg)
#ebookcraft
![Page 53: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/53.jpg)
#ebookcraft
REMEMBER AMAZON (SORRY)
• Media queries for legacy devices etc.
![Page 54: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/54.jpg)
#ebookcraft
@media amzn-mobi { " background-color:none;" page-break-inside:avoid;" margin:2em;" padding:1em;}"hr { "" visibility: visible; "}
![Page 55: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/55.jpg)
#ebookcraft
RECAP: WHAT WE DO NOW• Experiment!
• Document!
• Read your content and engage it.
• Communicate your findings.
• Drink!
![Page 56: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/56.jpg)
#ebookcraft
![Page 57: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/57.jpg)
#ebookcraft
BREAK TIME! (WE’LL RETURN TO CSS IN ~15 MINUTES.)
![Page 58: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/58.jpg)
#ebookcraft
WELCOME BACK!
![Page 59: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/59.jpg)
#ebookcrafthttp://cdn.cutestpaw.com/wp-content/uploads/2012/06/l-Professor-Corgi.jpg
![Page 60: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/60.jpg)
#ebookcraft
EXERCISE: CSS CLEANUPYour mission, should you choose to accept it…
1. Take Exercise_CSS-Cleanup.css and reduce its line count.
2. Organize the elements with comments.
![Page 61: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/61.jpg)
#ebookcraft
SAMPLE “ANSWER”
• There are many approaches to this (can be combined) • More content-driven (paragraphs, chapters,
sections, etc) • More semantics-driven (purely by the element)
• Generally: @font-face{}/@page{} at the top (global)
![Page 62: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/62.jpg)
#ebookcraft
![Page 63: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/63.jpg)
#ebookcraft
EXERCISE: RUNNING TEXT T.L.C.
Your mission, should you choose to accept it…
1. Navigate to CSS_Exercises-1.xhtml within CSS_Exercises.epub within a text editor.
2. Give the text some breathing room with new CSS. Identify elements that need to be offset in some way via alignment or other means.
![Page 64: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/64.jpg)
#ebookcraft
SAMPLE “ANSWER”
![Page 65: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/65.jpg)
#ebookcraft
EXERCISE: BLOCK PARTYYour mission, should you choose to accept it…
1. Navigate to CSS_Exercises-2.xhtml within CSS_Exercises.epub within a text editor.
2. There are a number of elements here that need to be styled. Make sure you utilize the following rules (be playful!):
• border (radius, color, width, etc)"• background-image"
• margin & padding
![Page 66: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/66.jpg)
#ebookcraft
SAMPLE “ANSWER”
![Page 67: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/67.jpg)
#ebookcraft
![Page 68: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/68.jpg)
#ebookcraft
EXERCISE: JUXTAPOSITION
Your mission, should you choose to accept it…
1. Navigate to CSS_Exercises-3.xhtml within CSS_Exercises.epub within a text editor.
2. Who doesn’t love Edgar Allan Poe? The answer: Children!
3. Your EPUB has the complete story of The Cask of Amontillado. Use your CSS skills to create a version of this Poe favorite like a children’s book.
4. (Yes, I’m a little insane.)
![Page 69: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/69.jpg)
#ebookcraft
![Page 70: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/70.jpg)
#ebookcraft
![Page 71: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/71.jpg)
#ebookcraft
RESOURCES• #eprdctn
• Standard CSS for EPUB Files: MobileReads
• Font Places: fontsquirrel.com, dafont.com (stick to OTF/WOFF)
• CSS Reference: Tympanus.net
• CSS-Tricks.com
![Page 72: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/72.jpg)
#ebookcraft
TAKEAWAYS• Exercise_CSS-Cleanup_ANSWERS.css
• CSS_Exercises_ANSWERS.epub
• ebookcraft_CSSplay.epub
• SampleAnimation.epub & CSS3_Sample.epub (Do not distribute please!)
• CSS Cheat Sheet (PDF; forthcoming)
![Page 73: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/73.jpg)
#ebookcraft
CONTACT MEI love making new friends & colleagues. Please reach out!
Twitter : @epubpupil
Email: [email protected] or [email protected]
LinkedIn: linkedin.com/in/irisamelia
![Page 74: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/74.jpg)
#ebookcraft
REFERENCES• Judging a Book by Its CSS (Iris Febres)
http://www.booknetcanada.ca/blog/2015/2/12/judging-a-book-by-its-css.html#.VPe4YGTF-RI
• Degristling the Sausage, BBEdit 11 Edition (India Amos) http://ink.indiamos.com/2015/02/12/degristling-the-sausage-bbedit-11-edition/
• Fun with Line Height! (Chris Coyer) https://css-tricks.com/fun-line-height/
• A Great UI is Invisible (Patrick Cox) http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/
• Mozilla Developer Network https://developer.mozilla.org/
![Page 75: The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a674141a28ab4d3c8b46af/html5/thumbnails/75.jpg)
#ebookcraft