Configuring CSS

You can style mobile and desktop Turbo pages with CSS.

Restrictions

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("https://example.com/image.png") }).

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 desired style, follow these steps:

  1. In Yandex.Webmaster, go to the Turbo pages → Debugging page.
  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, follow these steps:
  1. Switch to the style debugging section. To do this, click CSS.
  2. Write your CSS and click the Debug button to see how the styles are applied on a 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 Turbo pages → Settings page.
  2. In the CSS, click the Edit button.
  3. Paste the style set into the Configuring CSS field and click Save.

Example CSS

/* Page header color */
.cover {
  background: #BBD8E4;
  padding-bottom: 32px;
}

/* Page heading centered */
.cover .title {
  text-align: center;
}

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

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

/* Цвет ссылок */
.link {
  color: #307896;
}

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

/* Heading font */
.title_level_2 {
  font-weight: 100;
}