Using CSS in AMP pages
We're not finished converting our page to AMP just yet; let's deal with the validation error that mentions the style sheet next:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'style.css'.
One of the ways that AMP achieves its speed is by forbidding linked external style sheets. This means that all CSS must be inlined in the <head>
of your AMP page. Open up the style sheet, and copy-paste all of the CSS rules you find into the AMP document. You'll need to wrap this CSS in a <style amp-custom>
tag like this:
<style amp-custom> html, body, ul { margin:0; padding:0; } ... </style>
Note
You can only have one <style>
tag in your AMP document, and it must include the amp-custom
attribute.Inlined CSS is limited to 50 KB per page, which is considered enough to style a single page
If you reload the page now, you should see that the CSS validation error message is now resolved.