I have read https://github.com/ampproject/amphtml/blob/master/docs/create_page.md about the usage of CSS, but am not sure what CSS selectors the format allows. Are there any restrictions on selectors/properties?
Can style declarations be placed anywhere in <html> or only in <head>?
Is it possible to include any external stylesheets?
From the Official AMP GitHub Documentation:
You may include 1 <style> tag in the <head> of the DOM. You must append amp-custom to the <style> tag like this: <style amp-custom>your style rules here</style>
You may not alter the margin property on the body element.
You may not load an external stylesheet or import one via @import
You may not add style attributes to elements.
You may not use the !important qualifier.
You may never use any of the following properties:
behavior:overflow: scrolloverflow: autotransition:filteranimation-moz-bindingYou may use the following selectors:
.class e.g. .row
#id e.g. #sidebar
tag-name e.g. section
.row, .clearfix or #sidebar, #main-body, article
@media (max-width:48em){}
You may use the following pseudo-selectors:
:hover:active:visitedYou may not use any input elements with the exception of button (as these are used to interact with AMP Web Components).
You are obliged to avoid using class names prefixed with -amp or -amp- to avoid conflicting with AMP components. You can override the styles of these components if you wish.
Your style rules must not exceed 50KB.
You may acquire font assets either through a whitelisted font vendor (... Google Fonts) or by fetching the font through @font-face via HTTP/HTTPS — i.e. not via data: or JavaScript plugin (since JS is banned).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With