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