Skip to main content


Task-driven tutorials and recipes for PageSeeder

How to change the display of PSML using CSS

Skills requiredCSS
Time required (minutes)15
Intended audienceDeveloper


PSML documents are rendered as HTML when displayed to end-users in both PageSeeder and Berlioz. This tutorial explains how to customize the presentation of documents using CSS styles.

This tutorial explains how to create and customize styles for the document type of “review” in the “movie” project while working in the “test” group.


This tutorial assumes that:

  • The student knows how to create a document.
  • The student knows how to create a document type.
  • The student has a member role of administrator.

All tutorial files are on Github .


Create the document type

Create a document type of “review”, see How to create a new document type.

Do this in the “movie” project. Create a group called “test” and add yourself as a member.

Create custom stylesheet

Go to the Template configuration page, click the Create link for your document type in the Style column:

Template configuration – Style

If a style configuration already exists for your document, the link is edit instead, but it opens the same panel.

It opens the code editor panel titled document.css

This creates /psml/movie_information/document.css file that contains the configuration for the editors. The editor config for a document type is located in /psml/[document-type]/document.css.

Customizes the styles

The styles your document type can now be customized.

Edit ‘document.css’ in the code editor panel and add the following content:

.document-type-movie_information .psml-content h1 { 
  color: blueviolet
.document-type-movie_information .psml-content h2 {
  background: yellow
.document-type-movie_information .psml-content p {
  border: 1px dotted charcoal

The default styles for PSML content are prefixed with .psml-content to ensure that our custom rules have a higher priority, we add the .document-type-[type] selector.

Create a document check

In the test group, create a new document and select “review” as the type. This document is needed to test the updated styles.

Edit the document content so that it includes:

  • a heading level 1;
  • a heading level 2;
  • multiple paragraphs.

View the updated format to confirm the following changes:

  • heading level one should appear 'blueviolet';
  • heading level two should have a yellow background;
  • the paragraphs should have a dotted dark gray border.

Understanding more

CSS is a big, fast-moving  topic. The following points might help to provide additional context or direction.


By default, PageSeeder uses a standard PSML to HTML transformation to present documents in the browser. The styles are applied to this HTML, not the PSML used to generate it.

The mapping between PSML and HTML is straightforward and documented in the article on PSML document styles (CSS).

Order of styles

Styles are applied to the HTML in the following order:

Styles builtin to the browser

The Default PageSeeder styles that provide basic typography

The default PageSeeder styles defined in psml-content.css

Styles specific to a document type, like those described in this tutorial

Created on , last edited on

Available tutorials