---
title: "How to change the display of PSML using CSS"
source: https://dev.pageseeder.com/get_started/tutorials/how_to_customize_the_style_of_psml_documents.html
last_updated: 2026-08-07T17:09:54+10:00
tokens: ~980
---

# How to change the display of PSML using CSS

| Property | Value |
| --- | --- |
| Skills required | CSS |
| Time required (minutes) | 15 |
| Intended audience | Developer |
| Difficulty | Easy |
| Category | Document |

## Objective

[PSML](../../reference/glossary/psml.md) documents are rendered as [HTML](../../reference/glossary/html.md) when displayed to end-users in both PageSeeder and [Berlioz](../../reference/glossary/berlioz.md). 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](../../reference/glossary/document_type.md) of “review” in the “movie” project while working in the “test” group.

## Prerequisites

This tutorial assumes that:

- The student knows how to create a document.
- The student knows how to create a [document type](create_a_new_document_type.md).
- The student has a member role of [administrator](../../reference/glossary/administrator.md).

All tutorial files are on [Github](https://github.com/pageseeder/pageseeder-tutorials/tree/master/customizing_psml_style).

## Tutorial

### Create the document type

Create a document type of “review”, see [How to create a new document type](create_a_new_document_type.md).

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](/content/get_started/tutorials/../../images/tutorials/template_config_style_v60000.webp)

> **Note:** 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**

> **Tip:** 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:

```css
.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
}
```

> **Tip:** 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.

#### PSML to HTML

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)](../../guide/configuration/psml/psml_document_style.md).

#### 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