First, inline and simplify your CSS. Chances are you’re including CSS via one or many external stylesheets. AMP only supports a single inline stylesheet at the head of the page. So you’ll have to merge whatever stylesheets you have and inline them into the style AMP custom tag. If you’ve been using a single stylesheet for all of your subpages, and maybe a CSS framework like Bootstrap on top, you’ll probably run into the 50KB size limit AMP enforces.
How to Speed Up Your Website with AMP (Accelerated Mobile Pages)
The first step, then, is to replace your CSS framework with something tinier, like AMP Start, or get rid of it entirely. Chances are you won’t need a framework in most cases, not even to build complicated grids. Pure CSS grids are now supported in all modern browsers. Secondly, only load the CSS required for the current page, instead of a global file that includes everything. If the validator still complains about your CSS, it’s probably because you have a few important in there, or you’re trying to animate stuff you really shouldn’t basically, anything that isn’t opacity and transforms.
Next, substitute media elements and iframes. When you’re done with the CSS, you want to replace any HTML tags that AMP doesn’t support. The most obvious ones are image, video, audio, and iframe. Luckily, all of these have substitutes for AMP that function almost exactly the same, and you can read all about them in the AMP docs.
Next, find AMP components that replace third-party embeds and include them.
And even interactions that need to be toggled by click can be achieved by using the infamous check box hack. The CSS community is incredibly creative and these are the broad strokes to go from HTML to AMP HTML. When in doubt, check out the numerous ways you can validate your pages, and have a look at some of the automatic converters that the community has built for inspiration.