ebook css

project type
client work
last updated
Dec 22, 2021 09:19 PM
description
how to use Calibre to professionally format ebooks
notion image
 
 
these are the basic elements to format an ebook in calibre. it includes formatting for social link icons, table of contents, titles, subtitles, blockquotes and first line formatting.
 
check out how to use calibre to publish your ebook here:
 

stylesheet

 
@namespace h "http://www.w3.org/1999/xhtml";
body {
  display: block;
  margin: 5pt;
  page-break-before: always;
  text-align: justify;
}
h1, h2, h3 {
  font-weight: bold;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1em;
}
p {
  margin-bottom: 1.5em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1em;
}
a {
  color: inherit;
  text-decoration: inherit;
  cursor: default;
}
code, pre {
  white-space: pre-wrap;
}
.center {
  text-align: center;
}
.cover {
  height: 100%;
  text-align: left;
  margin-left: 3em;
  margin-right: 3em;
}
.title {
  font-style: italic;
  text-transform: uppercase;
  font-family: "Roboto Mono";
  margin-top: 5em;
  font-size: 150%;
}
.first-line {
  text-transform: uppercase;
  font-size: 80%;
  font-family: "Roboto Mono";
}
.toc {
  font-family: "Roboto Mono";
}
p.toc {
  margin-bottom: 0;
}
h1 {
  margin-bottom: 0;
}
h2 {
  font-size: 130%;
  font-family: "Roboto Mono", bold;
  margin-top: 0;
  margin-bottom: 3em;
}
h3 {
  text-transform: uppercase;
  font-size: 100%;
  font-family: "Roboto Mono", bold;
}
.subtitle {
  font-family: "Roboto Mono", Italic;
  font-style: italic;
}
.copyright {
  font-family: "Roboto Mono", bold;
  font-size: 100%;
  text-transform: uppercase;
}
blockquote {
  margin-right: 5em;
  margin-left: 2em;
  margin-bottom: 3em;
  font-family: "Roboto Mono Light";
  font-size: 100%;
}
.email {
  margin-right: 5em;
  margin-left: 3em;
}
.cover-line {
  margin-right: 5em;
  margin-left: 3em;
}
hr {
  border-top: 1px solid;
}
.contact-info {
  text-align: center;
}
.cover-page {
  text-align: center;
  margin-right: 3em;
  margin-left: 3em;
}
.social-media-profiles {
  clear: both;
  page-break-inside: avoid;
}
.social-media-profiles {
  margin-top: 1em;
}
.social-media-profiles.as-icons {
  text-align: center;
}
span.social-profile-text {
  display: none;
}
 

page styles

 
@page {
  margin-bottom: 5pt;
  margin-top: 5pt;
}
@font-face {
  src: url(RobotoMono-Regular.ttf);
  font-family: "Roboto Mono";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  src: url(RobotoMono-Italic.ttf);
  font-family: "Roboto Mono";
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
}
@font-face {
  src: url(RobotoMono-Bold.ttf);
  font-family: "Roboto Mono";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  src: url(RobotoMono-Light.ttf);
  font-family: "Roboto Mono Light";
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}
@media not amzn-mobi {
  .social-media-profiles .social-profile .social-profile-image {
    height: auto;
  }
}
@media not amzn-mobi {
  .social-media-profiles .social-profile .social-profile-image {
    width: 1.8em;
  }
}
@media not amzn-mobi {
  .social-media-profiles.as-icons .social-profile {
    display: inline;
    padding-left: 0.05em;
    padding-right: 0.05em;
  }
}
@media amzn-kf8 {
  .social-media-profiles.as-icons .social-profile {
    padding-left: 0.15em;
    padding-right: 0.15em;
  }
}
@media amzn-mobi {
  p.social-profile {
    text-align: center;
  }
}
@media amzn-mobi {
  span.social-profile-text {
    display: block;
  }
}
@media amzn-mobi {
  span.social-profile-image-decorator {
    display: none;
  }
}
@media not amzn-mobi {
  .toc {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}
@media amzn-mobi {
  .toc {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}
@media amzn-kf8 {
  .toc {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}
@media not amzn-mobi {
  .cover {
    margin-left: 5em;
    margin-right: 5em;
  }
}
@media amzn-mobi {
  .cover {
    margin-left: 5em;
    margin-right: 5em;
  }
}
@media amzn-kf8 {
  .cover {
    margin-left: 5em;
    margin-right: 5em;
  }
}