Appearance and Design

11 Custom Styles (CSS)

Last update: Jan 16/24

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;
}

/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*/
h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {
padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;
margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;
font-size: 0.9em;
color: #fff;
text-align: left;
font-weight: normal;
font-style: normal;
}
/*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; }

td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{
font-size: inherit;
line-height: inherit;
margin-top: inherit;
}

/*Match font size in multicolumn lists*/ 
.twocolumn, .threecolumn{ 
  font-size: inherit; }

/*Styles for end-of-chapter content (image descriptions and attributions headings)*/
h1.eocp {
font-size: 0.9em;
padding-top: 4em;
}
h1.eoc {
font-size: 0.9em;
}

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;
}

/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*/
h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {
padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;
margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;
font-size: 0.9em;
color: #fff;
text-align: left;
font-weight: normal;
font-style: normal;
}
/*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; }

td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{
font-size: inherit;
line-height: inherit;
margin-top: inherit;
}
/*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; }

/*Ensures all text on copyright page is the same size*/
#copyright-page li, #copyright-page .textbox {
font-size: 0.75em;
}

/*Match font size in multicolumn lists*/ 
.twocolumn, .threecolumn{ 
  font-size: inherit; } 

/*Provide web addresses of links in Print PDF, except for internal links and anchor tags*/
.print a:not(.internal, a[href*="chapter"], a[href*="part"], a[href*="front-matter"], a[id])::after {
content: " (" attr(href) ")";
}

/*Force linebreak for URL strings in Print PDF*/
.print a:not(.internal, a[href*="chapter"], a[href*="part"], a[href*="front-matter"], a[id])::after {
content: " (" attr(href) ")";
word-break: break-all;
}

Optional

/*Provide web addresses of links in Print PDF, but not links that have class="internal"*/
.print a:not(.internal)::after {
content: " (" attr(href) ")";
}

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

/*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;
}

/*Indent chapter headings in the table of contents (when using two-level table of contents)*/
.toc-subsection-title {
text-indent: 20px;
}

/*Allow tables to be broken across pages*/
/*auto page break in tables*/
.front-matter table, .part table, .chapter table, .back-matter table, body#tinymce.wp-editor table {
page-break-inside: auto;
}
/*Avoid footnotes breaking across pages*/
.footnote{
page-break-inside: avoid;
}

Ebook

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;
}

/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*/
h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {
padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;
margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;
font-size: 0.9em;
color: #fff;
text-align: left;
font-weight: normal;
font-style: normal;
}
/*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; }

td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{
font-size: inherit;
line-height: inherit;
margin-top: inherit;
}
/*Makes it so videos inside textboxes aren't larger than the textboxes*/
div iframe {
max-width: 98%;
}

/*Match font size in multicolumn lists*/ 
.twocolumn, .threecolumn{ 
  font-size: inherit; } 

Optional

/*Fixes an issues with right/left aligned images that are oversized and overlapping with content*/

.wp-caption.alignright, .wp-caption.alignleft {

  width: 25% !important;

}

OR

.wp-caption.alignright, .wp-caption.alignleft {

  width: 194px !important;

}

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;
}

/*Increase space between list items*/
ol.space li {
margin-bottom: 30px;
}

/*Style for blank spaces - all text with this class will be white with a black underline.*/
.blankspace {
color: #fff;
text-decoration: underline;
text-decoration-color: black;
}

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