HTML/CSS Code Snippets
Below are several brief how-to articles for implementing pleasing and useful styles in Pressbooks. These were largely developed by staff and students working in the OER Design Studio — perhaps you will have something of your own to contribute!
Fix Padding/Margins Around Headings
The amount of spacing around headings is dictated by the Pressbooks theme you have chosen, and may contain more padding than you would like. Remember when editing the Custom Styles Sheet, you can customize the Web, PDF, and eBook versions. If you want the change to occur across all three formats, you will need to copy the code to each drop-down (top).
The amount of padding around a heading can be adjusted using Custom Styles. Changes will remain consistent throughout the text.
- On the Dashboard, select Appearance then Custom Styles
- In the Your Web Styles box, add the CSS shown below
- Adjust the padding size by increasing or decreasing the number after margin-bottom: and margin-top:
/* Bold heading h3 */
.chapter h3{
margin-bottom:0.5;
}
main *+p {
margin-top: 0em;
}
NOTE: This particular code adjusts heading 3. Change the heading number to adjust a different heading (.chapter h1, .chapter h2 etc.). If you would like to change the spacing around every heading, use the code below.
/* bold headings h1 - h4 */
.chapter h1, .chapter h2, .chapter h3, .chapter h4 {
margin-bottom: 1em ;
}
main *+p {
margin-top: 0em;
}
Rounded Textbox Corners
Place the following in Custom Styles:
.textbox, .textbox p {
hyphens: none;
border-radius: 1.5em !important;
}
.textbox__header {
border-radius: 1.5em 1.5em 0 0 !important;
}
Icons in Textbox Headers
Place the code below in Custom Styles. Note the use of ::before (known as a pseudo-element). A full list of CSS pseudo-elements can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
/*Icons in textbox headers*/
h2.textbox__title {
margin: 0;
}
.textbox--learning-objectives .textbox__header::before,
.textbox--exercises .textbox__header::before,
.textbox--examples .textbox__header::before,
.textbox--key-takeaways .textbox__header::before {
content: "";
display: block;
float: left;
background-size: 50px 50px !important;
width: 50px;
height: 50px;
margin: 5px 10px 0 0; /*adjust these values if you needed */
}
/* Learning Objectives Box */
.textbox--learning-objectives .textbox__header::before {
background: url("IMG_URL_HERE") no-repeat;
}
/* Question/Exercises Box */
.textbox--exercises .textbox__header::before {
background: url("IMG_URL_HERE") no-repeat;
}
/* Examples Box */
.textbox--examples .textbox__header::before {
background: url("IMG_URL_HERE") no-repeat;
}
/* Key Takeaways Box */
.textbox--key-takeaways .textbox__header::before {
background: url("IMG_URL_HERE") no-repeat;
}
/* No-Icon */
.textbox-no-icon::before {
display: none !important;
background: none !important;
}
/*End of icons in textbox headers*/
Basic Accordion
The following HTML element allows for content to hidden and displayed when a user clicks on it:
Accordion Header (could be a question)
Hidden text (could be the answer to the question posed above).
To include this accordion, use the following HTML in your page at the desired spot using the Text Editor:
<details>
<summary><strong>Accordion Header (could be a question)</strong></summary>
Hidden text (could be the answer to the question posed above).
</details>
Fancy Accordion (With Shading and Borders)
Header Content Here
HIDDEN TEXT HERE
To apply the styling above, apply the following HTML page code in the Text Editor:
<div class="fancy-accordion-wrapper">
<details class="fancy-accordion"><summary> Header Content Here </summary>
<div class="collapsed">
HIDDEN TEXT HERE
</div>
</details>
</div>
Then copy/paste the following into Custom Styles:
/*Fancy Accordion*/
.fancy-accordion-wrapper {
margin-bottom: 60px;
position: relative;
}
details.fancy-accordion {
margin-bottom: -45px;
border-radius: 15px;
border: 1px solid #0b6396;
padding: 0px;
}
details.fancy-accordion > summary {
padding: 10px;
font-size: 1.25em;
text-indent: 30px;
background-color: #0b6396;
color: #fff;
border: none;
cursor: pointer;
border-radius: 10px 10px 10px 10px; }
details.fancy-accordion[open] > summary {
background-color: #0b6396;
color: #fff;
border-radius: 10px 10px 0 0;
}
.collapsed {
/*border-radius: 10px;
border: 2px solid #0b6396;*/
padding: 20px;
margin-bottom: 10px; }
/* # The Rotating Marker # */
details.fancy-accordion summary::marker {
display: none;
content: ""; }
details.fancy-accordion summary::before {
content: "▶";
left: -0.6em;
position: absolute;
transform: rotate();
transform-origin: 70% 50%;
transition: 0.2s transform ease; }
details.fancy-accordion[open] > summary:before {
transform: rotate(90deg);
transform: ease 1s; }
/* # The Sliding Summary # */
@keyframes details-show {
from {
opacity: 0;
transform: var(--details-translate, translateY(-0.5em)); } }
details.fancy-accordion[open] > *:not(summary) {
animation: details-show 750ms ease-in-out; }
/* End of Accordion */
Left Bar Text Decoration
The above effect can be achieved applying a custom class to the page HTML and then using a global style in Custom Styles. In the Text Editor, apply the class to any text you want to accentuate with the left bar, for example:
<div class="leftbar">Left Bar Text</div>/*Text accent - indent & left coloured bar*/
.leftbar {
border-left: 10px solid teal; /* the bar */
padding-left: 10px;
margin-left: 10px;
}
Note that you can control the colour and width of the bar using the “border-left” property. You could even have several different bars with varying colours, for example, by defining a custom class for each.
Below is the implementation for a similar effect with the text enclosed in a box (remember to apply the class in the page HTML):
/*Box with left accent bar*/
.box {
border-top: 1px solid teal;
border-right: 1px solid teal;
border-bottom: 1px solid teal;
border-left: 15px solid teal;
padding: 10px;
}
Figure (Gives Greater Control Over Captioning)
To use the Figure element, place the following HTML in your page using the Text Editor:
<figure>
<img src="YOUR_IMAGE.jpg" alt="ALT-TEXT" style="width:100%">
<figcaption>Fig.1 - MY IMAGE</figcaption>
</figure>
The <figure> tag will house the <figcaption> tag and you can choose where you would like to place the caption (above or below) in relation to the content. You can place an image, but remember the image caption is different from the figcaption. The figure doesn’t have to be an image, the figure could be a table, just move whatever HTML pertains to the figure inside the figure tags. Styles can be applied to the <figure> and <figcaption> elements using CSS, either inline or in Custom Styles. See https://www.w3schools.com/tags/tag_figure.asp for more details.
Hanging Indent (For APA References)
In order to list references with hanging indents, for example:
Anthony, S. (2009). Major League Innovation. Harvard Business Review. https://hbr.org/2009/10/major-league-innovation
Format each reference like this in the page Text Editor:
<p class="hanging-indent" style="text-align: left;">REFERENCE TEXT</p>
Rounded Image Borders
Rounding the corners on images is achieved the same way as with any other HTML element – by using the border-radius CSS property. You can do this either inline to apply to a single image, or in the Custom Styles editor using a custom class or applied to all images using the img selector. For example, the following would be placed in the page HTML Text Editor to round the corners of a single image and apply a grey border:
<img src=”IMAGE SOURCE” style=”border-radius: 10%; padding: 3px; border: 1px solid grey;” />
For the above style to apply to all images in the book, place the following in the Custom Styles editor:
img {
border-radius: 10%;
padding: 3px;
border: 1px solid grey;
}
Table Template (Rounded corners, alternating row shading)
| Example Header |
|---|
| Example Content… |
| Example Content… |
| Example Content… |
If you are not familiar with how tables are represented in HTML, please check out the article at https://www.freecodecamp.org/news/html-tables-table-tutorial-with-css-example-code/ before applying advanced styling to tables.
To apply the above template, first add the tableDesign1 custom class to your table in the page HTML Text Editor:
<table class="tableDesign1">
. . .
</table>
Copy and paste the CSS below into the Custom Styles (take note of style options indicated by the comments):
/* tableDesign1 template */
table.tableDesign1{
border: none !important;
width: 100% !important;
border-radius: 1em !important;
margin: 0 !important;
}
/* this formats the first row as a header row, with blue background and white text */
table.tableDesign1 th, table.tableDesign1 tr:first-of-type td {
color: white !important;
background-color: #0b6396 !important;
padding-left: 1.5em;
}
.tableDesign1 tr:first-of-type{
border-bottom: solid black 1px;
background-color: #0b6396 !important;
}
/* apply rounded corners to table */
.tableDesign1 th:first-of-type{
border-top-left-radius: 1.5em;
}
.tableDesign1 tr:last-of-type td:first-of-type{
border-bottom-left-radius: 1.5em;
}
.tableDesign1 tr:last-of-type td:last-of-type{
border-bottom-right-radius: 1.5em;
}
.tableDesign1 tr:first-of-type td:first-of-type{
border-top-left-radius: 1.5em;
}
.tableDesign1 tr:first-of-type th:last-of-type, .tableDesign1 tr:first-of-type td:last-of-type{
border-top-right-radius: 1.5em;
}
.tableDesign1 td{
padding-left: 1.5em !important;
}
/* alternating row colours */
.tableDesign1 tr:nth-child(even), .giveMePretty {background: #CCC};
.tableDesign1 tr:nth-child(odd), .giveMePretty {background: #f0f6ff}
/* End of tableDesign1 */
Rounded YouTube Video Embedding
To apply the above style to videos (only works with YouTube embeds), use the following code in your page HTML (Text Editor):
<div style="border: solid black 5px; border-radius: 1.5em;">
<div style="border-radius: 1.1em; overflow: hidden; background-color: #f0f6ff;">
YOUTUBE EMBED LINK GOES HERE
<p style="text-align: center; margin: 1em;">Video: "<a href="LINK TO YOUTUBE VIDEO">VIDEO TITLE</a>" By VIDEO AUTHOR [VIDEO DURATION]</p>
</div>
</div>
Change Lightbox Background Colour
If you have images with transparent backgrounds that don’t show up properly in the lightbox, insert the following in the Custom Styles editor (this will add a white background underneath the image):
/* Change lightbox background colour */
.lity-content {
background-color: white !important;
padding: 2rem;
}
Format Headings
To make all text in heading font bold in the book, add the following to the Custom Styles:
/* bold all headings */
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
}
Note that you have a lot of control over the format of headings using CSS in the Custom Styles editor. For example, if you want all Heading 2 text in only the Parts to be blue and italic, you can do so like this:
/* part heading 2 text to blue and italic */
part h2 {
color: blue !important;
font-style: italic !important;
}
Editing Marks (Strikethrough, Underline)
The following will allow you to mark text as crossed out or deleted in a way that is accessible to people using screen readers.
- Signify text that has been crossed out:
<span role="deletion">The deleted text.</span> - Signify text that has been inserted:
<span role="insertion">The inserted text.</span>
In addition, the following must be added to the Custom Styles:
/*Editing Marks*/
[role="insertion"] {
color: #1215b0;
text-decoration: underline;
}
[role="deletion"] {
color: #be0000;
text-decoration: line-through;
}
It would look as follows:
- This is the deleted text.
- This is the inserted text
Circle Text / Section
Here is how you can have a word or section of text circled:
<span style="border: 1px solid; border-radius: 30px; padding: 3px;">This text is circled.</span>
It would look like this:
This text is circled.
Note that if you want to be able to apply this style in multiple places, you should apply a custom class to the text being circled and put the CSS styling in the Custom Styles. For example, on the page in the Text Editor you would have:
<span class="circled">This text is circled</span>
And in Custom Styles, add:
/*Circled Text*/
.circled{
border: 1px solid black;
border-radius: 30px;
padding: 3px;
}
/*End of Circled Text*/
Bulleted and Numbered List Formatting
The following can be used to customize lists. This is especially useful when you have sublists that are not numbering how you want them.
- Lowercase letters:
<ol type="a"> - Capital letters:
<ol type="A"> Roman numerals:<ol type="I">To start numbering from the number “3”:<ol start="3">- Two columns:
<ul class="twocolumn"> - Three columns:
<ul class="threecolumn">
li style="break-inside: avoid;"> Quote Box
How wonderful it is to display quotes in their own box!
— An OER Instructional Designer
To achieve the above effect, use code following this format on the page:
<div class="textbox quote-box"><div class="quote-box_icon" /><p style="text-align:left;">How wonderful it is to display quotes in their own box!</p> <p style="text-align:left; font-style:normal"> -- An OER Instructional Designer</p></div>You’ll need to add the quote icon you wish to use to the Media Library and make a copy of its Pressbooks URL. Add the following CSS in the Custom Styles (note where you need to paste the URL for your icon):
/* quote-box styling */
.quote-box {
position: relative;
border-color: darkgray !important;
border-width: 2px;
}
.quote-box_icon {
content: url("[PASTE ICON URL HERE]");
position: absolute;
display: inline-block;
width: 45px;
left: -22px;
top: 50%;
transform: translateY(-50%);
}
.quote-box p {
font-style: italic;
/*You may have to play with margin and padding values for desired look*/
margin-left: 5em;
padding: 2em;
}
.quote-box p:first-of-type:first-letter {
font-size: 24px;
font-weight: bold;
line-height: 0.2em;
}
/* end of quote-box */
Table with Alternating Row Colours / TablePress Replacement
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
| Row 3, Col 1 | Row 3, Col 2 | Row 3, Col 3 |
To achieve the above effect, apply the alternating class inside your <table> tag, then paste the following into the Custom Styles:
/* Table with alternating row colours */table.alternating tr:nth-child(even){background: #f5faff !important;}
table.alternating tr td:first-child{
padding-left: 1em;
}
table.alternating tr:nth-child(odd){
background: #daeaf5 !important;
}table.alternating td {
padding-left: 1em;
}
table.alternating th {
background: #0b6396;
color: #fff;
padding-left: 1em;
}
TablePress to HTML Instructions
Since there are issues with exporting TablePress tables to PDF, it is often desirable to convert tables generated in TablePress to HTML. Many designers may use TablePress because of its ability to autogenerate tables from imported datasets and the convenience of its visual editor. Using the alternating coloured HTML table, we can provide a similar look to the tables created in TablePress while overcoming the PDF export issues. Simply navigate to the table in the TablePress editor and export it to HTML. Add the generated HTML in the Text editor at the desired position and remember to add the alternating class to the table and the accompanying styling in the Custom Styles as detailed above.
Banner Image Overlayed with Text
To Achieve the above effect add the following HTML and embed the desired banner image.
<div class="image-container">
EMBED YOUR BANNER IMAGE HERE
<div class="overlay-text">YOUR BANNER TEXT GOES HERE</div>
</div>
You will need to add the desired banner image to the media library. Additionally, add the following CSS to the books custom styling and potentially adjust the colour of the banner text to make it legible, and/or adjust the CSS properties to move the text to an appropriate spot above the image.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
display: block;
width: 100%;
height: auto;
}
.overlay-text {
//These values will adjust the space above the image which the text lies on, they will have to be adjusted to fit the banner you are making use of
//background-color: #000000; //this line can be uncommented to better display the space in which the text will lie above the image
position: absolute;
top: 50%;
left: 50%;
transform: translate(-26.5%, -55%);
width: 63.5%;
height: 73.5% fit-content !important; //fit-content will vertically align the text within the alloted space. It can be removed if this effect is undesired
//these values can be adjusted to change the appearance of the text
color: #fff;
font-size: 1.20em;
font-family: "Montserrat", sans-serif;
padding: 10px 20px;
font-weight: bold;
line-height: 1.2857142857em;
text-align: center;
hyphens: none !important; //this line will disable hyphenation across lines and can be disabled if this effect is undesired
}
@media only screen and (max-width: 600px) {
//You will also need to make adjustments for how the text will appear and overlay the image on a mobile setup. Again, all of these values will need to be adjusted to fit the banner image you are making use of.
.overlay-text {
width: 70%;
font-size: 0.58em;
line-height: 1.1em;
}
}
Attribution
“Standard Practices and Workarounds” from 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.
