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.

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.
-amp- class and i-amp- tag names Class names, in author stylesheets, may not start with the string -amp-. These are reserved for internal use by the AMP runtime. It follows, that the user's stylesheet may not reference CSS selectors for -amp- classes and i-amp tags.

Restricted styles

The following styles are allowed, but are restricted in terms of which values they support:

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.

Using CSS preprocessors

The generated output of preprocessors works just as well in AMP as any other web page. For example, the site uses Sass. (We use Grow to build the static AMP pages that make up the 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.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">

  <title>Accelerated Mobile Pages Project</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url.path}}">
  <link href=",300,400,500,700" rel="stylesheet">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}

  <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=""></script>
  <script async custom-element="amp-carousel" src=""></script>
  <script async custom-element="amp-analytics" src=""></script>
  <script async custom-element="amp-lightbox" src=""></script>
  <script async custom-element="amp-youtube" src=""></script>
  <script async custom-element="amp-sidebar" src=""></script>
  <script async custom-element="amp-iframe" src=""></script>

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