Using custom CSS in AMP pages
We have seen that CSS is a key part of layout and design in AMP, as it is in HTML. In fact, AMP components come with built-in, default styles that are defined in a CSS file, amp.css, that's automatically included by the AMP library. For custom CSS styling in your AMP pages, there are restrictions on what you can do. You should already know that:
- All styles must be defined in the
<head>of the document; no in-line styles - A maximum of 50 KB of CSS is permitted
- External stylesheets can't be used
There are also some further restrictions you should be aware of:
Style | Restriction | Description |
| Not allowed | Allows AMP to enforce its styling rules |
Class and tag names that start with | Not allowed | User stylesheets cannot define or reference CSS selectors for these classes and tags |
| Not allowed | Security restriction |
| Not allowed | Performance restriction |
| Restricted | Only GPU-accelerated properties allowed: |
