Style & layout

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

For performance and usability reasons, AMP limits some CSS styles and total bytes to 75,000 per page. However, AMP expands 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.

TIP – It is super easy to make elements responsive in AMP. Just put layout="responsive" on them. To learn more about Responsive Design in AMP, head to Create Responsive AMP Pages.

Add styles to a page

Each AMP ad has a 20,000 byte CSS limit, within the <style amp-custom> tag inside the head of the document. Styles defined in the head of the document and inline count towards this limit.

Define styles in head

Define CSS within the <style amp-custom> tag inside the head of the document. There is only one <style amp-custom> tag allowed on each AMP page.

<!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>

Style AMP components and HTML elements with class or selectors using common CSS properties:

<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>

Define inline styles

AMP allows inline styles:

<body>
  <p style="color:pink;margin-left:30px;">Hello, Kitty.</p>
</body>

Each instance of an inline style has a 1,000 byte limit. Inline styles count toward the total 20,000 byte limit.

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.

READ ON – Learn more about supported layouts in AMP

Provide placeholders & fallbacks

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

READ ON – Learn more about Placeholders and fallbacks

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.

READ ON – Learn more about art direction with srcset and sizes

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 20,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 byte limit:

READ ON – Learn more about how to validate and fix your AMP pages

Written by @pbakaus
with contributions from @Meggin