Styling and layout on AMP HTML pages is very similar to normal HTML pages – in both cases, you'll use CSS.

However, AMP limits some use of CSS for performance and usability reasons, while expanding responsive design capabilities with features like placeholders & fallbacks, advanced art direction via srcset and the layout attribute for better control over how your elements display.

Watch UpperQuad talk about the AMPproject site redesign, including the challenges of using AMP for the first time.

Add styles to a page

Add all CSS inside a <style amp-custom> tag in the head of the document. For example:

<!doctype html>
  <head>
    ...
    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>
    ...
  </head>

Define component styles with class or element selectors using common CSS properties. For example:

<body>
  <p>Hello, Kitty.</p>
  <amp-img
    class="grey-placeholder"
    src="https://placekitten.com/g/500/300"
    srcset="/img/cat.jpg 640w,
           /img/kitten.jpg 320w"
    width="500"
    height="300"
    layout="responsive">
  </amp-img>
</body>

Layout elements responsively

Specify the size and position for all visible AMP elements by providing a width and height attribute. These attributes imply the aspect ratio of the element, which can then scale with the container.

Set the layout to responsive. This sizes the element to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.

Provide placeholders & fallbacks

The built-in support for placeholders and fallbacks means your users never have to stare at a blank screen again.

Art direct your images

AMP supports both srcset and sizes attributes to give you fine grained control, of which images to load in which scenario.

Validate your styles and layout

Use the AMP validator to test your page's CSS and layout values.

The validator confirms that your page’s CSS doesn’t exceed 50,000 bytes limit, checks for disallowed styles, and ensures that the page's layout is supported and correctly formatted. See also this complete list of Style and layout errors.

Example error in console for page with CSS that exceeds the 50,000 bytes limit: