Customize CSS

There may be customizations that you’d like to make that are not currently available in your Theme Options. You will need to consider whether you have the time, resources, and expertise required to create your own Custom Styles, which are any CSS (Cascading Style Sheet) changes that you add to your book’s base theme.

The Basics

View the Base Theme CSS

You can readily view the CSS for your book’s base theme. From the left sidebar menu of your book’s dashboard, go to Appearance >> Custom Styles. The stylesheets are divided into three sections, corresponding to the web, e-book, and PDF formats, allowing for modifications to the base theme CSS.

Theme Web Styles

The first section of the Custom Styles page, Theme Web Styles, will include a scrolling box that contains the entire stylesheet (aforementioned CSS code) for a given format. The contents of the stylesheet are dependent on the theme you’ve chosen. This section is not editable but is very useful for reference. To fully understand the changes you can make using CSS, study this stylesheet carefully to identify the current design and create a design plan outlining the modifications you would like to make.

Your Web Styles

The second section of the Custom Styles page, titled “Your Web Styles,” is where you can make edits or additions to the stylesheet. Any CSS added in this section will override existing styles for the same class. After identifying the element-specific styles, you can copy the corresponding code to override the original theme styles for that element. You can also create your own components or classes to use in the textbook.

Recommended Practice: Create a private page to test any CSS modifications. Have a design plan in place before making any modifications.

CSS for Web, E-book, and PDF

Pressbooks prepares files in multiple formats, including web, e-book, and PDF. Each format is created using a specific stylesheet designed for its unique requirements, so you will need to select which one you edit each time and ensure that you make changes in all three stylesheets if you want the three formats to reflect each other. Choose from the dropdown menu at the top of the Custom Styles page to switch between formats. You can select either web, e-book, or PDF.

Important Points for Advanced Users

Some users may already be familiar with CSS. Even if you’re fluent in CSS, remember that each of the formats Pressbooks produces operates slightly differently, so what you may be used to using for a web page won’t necessarily translate to a PDF or e-book.

• Pressbooks doesn’t allow you to write an entire theme in CSS; instead, you modify the existing ones by overriding the default theme’s stylesheet. Therefore, even if you have used CSS before, there are some changes in how you write code. Explore the Theme Stylesheet (First Section of Custom Styles).
• When studying the Theme Stylesheet, use XHTML export to isolate particular classes and elements.
• When creating a new class, make sure to create the formatting for different text types (e.g. p, h1, h2, etc.) so that when the div tag is used in the HTML of a particular section or part, you can make the whole class separate from the rest of the page.
• The Complex CSS Appendix chapter in the back matter of this book features some advanced customized CSS designs created by the Library’s OER Team. Feel free to explore this section and the relevant CSS code for inspiration.
• Comment your CSS code.

Recommended Practice: After creating a design plan, make a private page to perform trials for any CSS modifications. Keep your design plan updated.