Configuring CSS

You can customize the appearance of mobile and desktop Turbo pages using your own CSS.


To ensure that Turbo page loading speed doesn't fall, the use of CSS is restricted. When writing the CSS markup, don't use:

  • Third-party fonts (including custom fonts).
  • Low-performance animation.
  • Selectors by tag name or ID.
  • Third-party downloadable resources (such as .page { background-image: url("") }).

To check the restrictions, use Stylelint. Configuration.

The maximum size of CSS in gzip format is 21 KB.

How do I customize it?

Step 1. Class definition

To define a class with the appropriate style:

  1. Go to the  → page in Yandex.Webmaster.
  2. In the RSS debugging section, insert the item of the page that contains debugging elements and click Apply.
  3. Open developer tools. To do this, press F12.

  4. Choose the desired element on the Turbo page using the tool.

  5. Find classes and styles that you want to change. Use them when you debug the display.

Step 2. Debugging the display

To debug the display of new styles:
  1. Switch to the style debugging section. To do this, click CSS.
  2. Write your CSS and click the button to see how the styles are applied on the sample Turbo page.

Styles are not applied if they are written incorrectly. Errors are displayed under the field in the CSS block.

Step 3. Saving styles

When the CSS styles are ready and the sample Turbo page is displayed correctly:
  1. Copy the style set and go to the  → page.
  2. In the CSS, click the Edit button.
  3. Paste the style set in the CSS settings field and click the button.

Example CSS

/* Color the page header * /
. cover {
  background: #BBD8E4;
  padding-bottom: 32px;

/ *Page title aligned to the center */
. cover .title {
  text-align: center;

.cover .subtitle {
  text-align: center;
  margin-top: 8px;

.cover .image {
  margin-top: 24px;
  border-radius: 4px;

/ * Link color */
. link {
  color: #307896;

/ * Turbo page icon color in the header */
.page .header-turbo-icon {
  fill: rgba(0, 0, 0, 0.6);

/ * Title font */
. title_level_2 {
 font-weight: 100;