HTML/CSS Styling Overview

There are a few ways to apply styling in Pressbooks:

• To the whole book, by selecting a theme and making adjustments to Theme Options Editor. This is typically one of the first steps in setting up a new book.
• To the whole book, using the Custom Styles Editor
• On a specific page, by applying CSS inline styles in the page Text Editor
• On a specific page, by using the predefined styles available in the Visual Editor toolbar
• On a specific page, by using Pressbooks shortcodes
• On a specific page, by using LaTeX (this is used specifically for typesetting math expressions)

Initial Style Setup

Before applying any custom styling of your own, make sure the following steps have been completed:

1. 1. Select Theme and use Theme Options to customize the overall look and feel of the book (see “Selecting and Editing Themes“.

1. Apply the Fanshawe OER Design Studio boilerplate styling (see “Studio Boilerplate CSS“). This applies some custom styles our studio typically uses (rounded textboxes, for example).

Also don’t forget that the toolbar in the Pressbooks Visual Editor can apply many of the most common HTML/CSS styles with a single click!

Custom CSS Styles

Pressbooks content is encoded with a combination of HTML and CSS. Styles written in CSS can be applied either globally (affects the whole book) or inline (affects only the tag it is applied to). If you need to apply a style to some instances of an HTML element but not all of them, this should be achieved by implementing a custom class. These three approaches are discussed below. For more information about using Pressbooks shortcodes, visit “Using Shortcodes“.

Global Styles

Where possible, global styles should be used, as these are managed from a central location. This greatly reduces the need to hunt through code on individual pages in order to make style changes.  Styles can be applied this way using the Custom Styles Editor.

If you’re having issues with a tag not working (which often happens when trying to override theme styles), try using the !important tag. It will override any style (unless it conflicts with another !important tag):

Note the inclusion of a comment (text between “/” and “/”) in the above example. All code added to the Custom Styles should have a comment that clearly explains its purpose.

For example:

Inline Styles

Inline CSS is written directly within the HTML tag which affects using the style attribute. For example:

. . . results in . . .

This is red, underlined text

Remember that inline styles take precedence over global or default styles – the example text above would still appear red even if the global style contained CSS code specifying blue as its colour. For the sake of consistency, inline styling should only be used in cases where global styling would not be appropriate or needs to be overridden (or where it has been inserted automatically by the Pressbooks editor of course).

To edit HTML/CSS for a given page, use the Text Editor.

Custom Classes

When you want to apply styling to a select group of elements, do so globally using a class selector. Pressbooks provides many classes that you can override in the custom styles, and the code snippets in this guide frequently make use of these (for example, the CSS to display textboxes with rounded corners) but you can also create your own if the need arises. Classes are selected in the Custom Styles (globally) by prefixing a dot (“.”) to the class name. For example, a tag that appears in the page HTML text like this:

Can be styled at the global level like this:

When creating a custom class, make sure to choose a class name that is clearly descriptive of the purpose of the class, so that anyone encountering it will be able to tell what the class does from the name alone. Remember — you aren’t the only person working on this Pressbook, and your styling could be cloned multiple times in the future, even beyond of the Fanshawe OER Design Studio!

What about custom IDs?

Since ID attributes can only be applied to a single element in the whole book, it is usually better to use inline styling for this purpose. This makes it easier for a designer to have access to the style “where it is happening” rather than hunting through the Custom Styles for something that only occurs once in the book, it can be dealt with where on the page where it occurs. The exception to this guideline would be if you are applying more complicated styling that would be awkward to write inside the element tag — for example, styling involving a lot of transformations, pseudo-selectors, animation, and so on.