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>
You can only have one <style> tag in your AMP document, and it must include the amp-custom attribute. ...

Get AMP: Building Accelerated Mobile Pages now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.