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.
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 page has a 75,000 byte CSS limit. 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 75,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.
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 75,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:
