Appearance and Design

10 Custom Styles (CSS)

Last update: November 17, 2021

The following CSS can be copied and pasted into the Custom Styles section in Pressbooks to modify the formatting of the book. The text inside the /**/ explains what the specific CSS does. Styles under “Required” are applied to every book. Styles under “Optional” are applied if needed.

When editing CSS, the following resources are super helpful:

Web

Required

/*Bolds Heading 2*/
.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {
font-weight: bold;
}
/*Bolds Heading 3s and left aligns them*/
.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
font-weight: bold;
text-align: left;
}
/*Fix table accessibility and display*/
.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {
border: 1px solid;
border-color: #373d3f;
}
.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {
border: 1px solid;
border-color: #373d3f;
}
#content table caption {
caption-side: top;
color:#000;
text-align: center; }

PDF

Required

The required CSS for PDFs is more robust than Web and EBook. This is because it includes the following:

  • Provide web addresses of link in Print PDF: This CSS will insert the web address in parentheses following the link text of a link in the Print PDF only. This makes it so people using the print version will be able to access those links. Note that this will also affect internal links – to omit internal links, add class="internal" to the link’s HTML. This replaces our previous practice of creating a list of links in the back matter.
  • Prevent textbox headers from being on different pages from their content: This ensures that a page break will not separate a textbox from its header.
  • Left-align regular text: By default, regular text in the PDF is justified (meaning words are spaced so that the left and right edges of a paragraph are perfectly straight). This causes irregular spacing that is not good for accessibility as it makes it harder to read. As such, we’ve added CSS to left-align regular text instead.

/*Bolds Heading 2*/
.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {
font-weight: bold;
}
/*Bolds Heading 3s and left aligns them*/
.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
font-weight: bold;
text-align: left;
}
/*Fix table accessibility and display*/
.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {
border: 1px solid;
border-color: #373d3f;
}
.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {
border: 1px solid;
border-color: #373d3f;
}
#content table caption {
caption-side: top;
color:#000;
text-align: center; }
/*Provide web addresses of links in Print PDF, but not links that have class="internal"*/
.print a:not(.internal)::after {
content: " (" attr(href) ")";
}
/*Prevents textbox headers being on different pages from their content*/
.textbox__header {
page-break-after: avoid;
}
/*Change text alignment from justified to left-aligned (makes text more readable)*/
p {
text-align: left;
}
/*Makes it so centre/right/left-aligned images in the PDF without captions will have text wrap properly*/
img.alignright {
float: right;
margin-left: .5em;
}
img.alignleft {
float: left;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto; }

Optional

/*Provide links in Print PDF, only links that have class="external"*/
.print a.external::after {
content: " (" attr(href) ")";
}
.print a {
text-decoration: underline;
}

/*Reduces size of embedded video image, and reduces space around placeholders for all interactive content*/
.interactive-content img {
max-width: 50%;
}
.interactive-content {
line-height: 1.2em;
margin-bottom: 0.5em;
padding: 0.5em 0.5em 0.5em 0.5em; }
/*Reduce padding around standard textboxes*/
.textbox, .bcc-box {
padding: 1em 1em 1em 1em;
}
/*reduce size of media attributions in PDF*/
div[class^="media-attributions"] {
font-size: 0.7em;
margin-top: 0.2em;
}
div[class^="media-attributions"] li {
padding: 0;
line-height: 0.9em;
}

Ebook

/*Bolds Heading 2*/
.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {
font-weight: bold;
}
/*Bolds Heading 3s and left aligns them*/
.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
font-weight: bold;
text-align: left;
}
/*Fix table accessibility/display*/
.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {
border: 1px solid;
border-color: #373d3f;
}
.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {
border: 1px solid;
border-color: #373d3f;
}
#content table caption {
caption-side: top;
color:#000;
text-align: center; }
/*Makes it so videos inside textboxes aren't larger than the textboxes*/
div iframe {
max-width: 98%;
}

Other Solutions

The following are CSS solutions developed for specific books that may be useful in the future but are generally not applicable to most books.

/*Increases width of sidebar textboxes*/
.textbox--sidebar {
margin: 1em 0 1em 1em;
max-width: 50%; }

/*Reduce padding around special textbox headings*/
.textbox.textbox--learning-objectives .textbox__header, .bcc-box.textbox--learning-objectives .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--exercises .textbox__header, .bcc-box.textbox--exercises .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--examples .textbox__header, .bcc-box.textbox--examples .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--key-takeaways .textbox__header, .bcc-box.textbox--key-takeaways .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}

License

Icon for the Creative Commons Attribution 4.0 International License

BCcampus Open Education Publishing Style Guide by BCcampus OER Production Team is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book