---
title: "CSS"
source: https://dev.pageseeder.com/reference/sample_code/css.html
last_updated: 2026-08-07T17:09:54+10:00
tokens: ~614
---

# CSS sample code

## Custom document styles

Here are some styles that could be applied to particular content in a document (in this example, a `<block label="xyz">` is displayed with text orange and centered, a dotted orange line on top but no other borders)

```css
/* Specific to type and block label 'xyz' */
.document-type-references .psml-content .label-xyz {
  border: none;
  border-top: 2px dotted orange;
  color: orange;
  font-style: italic;
  text-align: center;
}
```

> **Obsolete:** In version 5, you needed to import the default document styles using the following CSS import: ```css /* import default document styles */ @import url(../../../../weborganic/document/css/psml-content.css); ``` When switching to version 6, you must remove this line when using legacy code.

For further information regarding the customized display of content in PageSeeder, *see* [How to change the display of PSML using CSS](../../get_started/tutorials/how_to_customize_the_style_of_psml_documents.md) and for further reference regarding PageSeeder CSS, *see* [PSML document styles (CSS)](../../guide/configuration/psml/psml_document_style.md).

This example can be deployed by editing the CSS when on the following page: **Project dashboard** \> **Template** \> **Types**

## Custom block style

In this example, we use a darker background color for a warning block (`<block label="warning">` )

```css
/* Custom warnings */
.psml-content div.label-warning {
  background: #d42132 !important;
  color: white;
  border: none;
}

/* Also change the label name color */
.psml-content div.label-warning::before {
  color: white !important;
}

/* This allows code to be more readable */
.psml-content div.label-warning code {
  background-color: rgba(0,0,0,.25);
  color: white;
}

/* Don't forget the dark theme */
@media (prefers-color-scheme: dark) {
  .psml-content div.label-warning {
    background: #713f00 !important;
  }
}
```

## Section styling

The following example sets a different background for an entire section (`<section label="info">` )

```css
#section-info {
  background: repeating-linear-gradient(
    135deg, #f3f3e7, #f3f3e7 4px, #fff 4px, #fff 8px
  );
  border: 3px solid #f3f3e7;
  padding: 1rem;
}

#section-info::before {
  border-bottom: 3px solid #7732;
  color: #773;
  content: 'Section below cannot be edited';
  display: block;
  font-size: 18px;
  margin-bottom: 1rem;
  padding-bottom: 1rem; 
  text-align: center;
}
```