AMP
VI
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski

Supported CSS

Like all web pages, AMP pages are styled with CSS, but you can’t reference external

stylesheets (with the exception of custom fonts).

Also certain styles are disallowed due to performance implications.

Styles may live in the head of the document or as inline style attributes (see Add styles to a page). But you can use CSS preprocessors and templating to build static pages to better manage your content.

NOTE – AMP components come with default styles to make authoring responsive pages reasonably easy. These styles are defined in the amp.css.

Disallowed styles

The following styles aren’t allowed in AMP pages:

Banned style Description
!important qualifier Use and reference to !important is not allowed. This is a necessary requirement to enable AMP to enforce its element sizing rules.
<link rel=”stylesheet”> Disallowed with the exception of custom fonts.
i-amphtml- class and i-amphtml- tag names. The validator disallows class and tags names with the following regex `(^|\W)i-amphtml-`. These are reserved for internal use by the AMP framework. It follows, that the user's stylesheet may not reference CSS selectors for i-amphtml- classes and tags.

Performance recommendations

These allowed styles should restrict values to the following for an optimal performance:

Restricted style Description
transition property Only GPU-accelerated properties (currently opacity, transform and -vendorPrefix-transform).
@keyframes {...} Only GPU-accelerated properties (currently opacity, transform and -vendorPrefix-transform).

The custom fonts exception

AMP pages can’t include external stylesheets, with the exception of custom fonts.

READ ON – Learn more about custom fonts in AMP.

Using CSS preprocessors

The generated output of preprocessors works just as well in AMP as any other web page. For example, the amp.dev site uses Sass. (We use Grow to build the static AMP pages that make up the amp.dev site.)

When using preprocessors, pay special attention to what you include; load only what your pages use. For example, the head.html includes all required AMP mark-up and the inlined CSS from the *.scss source files. It also includes the custom element script for amp-youtube, among others, so that many pages across the site can include embedded youtube videos.



<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>AMP Project</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

To see how the above translates into formatted AMP HTML, view the source for any page in amp.dev. (In Chrome, right-click and View Page Source.)