---
title: "Introduction"
manual: "Pagewide CSS classes"
version: "13.0"
permalink: "https://docs.typo3.org/permalink/svent/pageclasses:introduction@13.0"
source: "Introduction/Index.rst"
rendered: "2026-10-19T06:45:56+00:00"
---

# Introduction {#introduction}

## What does it do? {#what-it-does}

The extension adds fields for CSS classes to the page properties (tab
**Appearance**). The classes are added to the class attribute of the
body tag, which gives you full flexibility to style single pages and whole
branches of your page tree differently.

-   **CSS classes of the page** are only added to this page.
-   **CSS classes for subpages** are added to all pages below this page, on
    every level. They are inherited until a page stops the inheritance.
-   **Stop inheritance**: a page with this option set does not get the
    subpage classes of its parent pages - and neither do the pages below it,
    unless they define subpage classes on their own.

Additionally, CSS classes for the page layout are added:

-   **Frontend layout** of the current page, e.g. `layout_1`. This is useful
    if authors should switch the design of a page by selecting a frontend
    layout. The frontend layout is not inherited.
-   **Backend layout** of the current page, or the "backend layout for
    subpages" of the nearest parent page, e.g. `backend_layout_pagets__2col`.
    This links the frontend design directly to the backend layout.

A rendered body tag looks like this:

```html
<body class="home news layout_1 backend_layout_pagets__1col">
```

## Screenshots {#screenshots}

![Tab "Appearance" of the page properties with the fields "BodyTag CSS Classes", "BodyTag CSS Classes for Subpages" and "Don't inherit CSS class from parent"](../Images/screenshot1.png)

![Constant Editor with the category "PAGECLASSES" and its four options](../Images/screenshot2.png)