Accelerated mobile pages link to css file

css mobile amp-html
osmanraifgunes picture osmanraifgunes · Mar 20, 2016 · Viewed 7.7k times · Source

I am trying to link to css file :

<link href="/semanticui/semantic.css" rel="stylesheet" />

Opening chrome in #development=1 mode to test my page for amp. I am getting this error : 

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/semanticui/semantic.css'.

Answer

Jeff Deskins picture Jeff Deskins · Mar 21, 2016

External stylesheets are not permitted. Use inline styling to avoid the additional request for css.

More info can be found at: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#stylesheets

Authors may add custom styles to a document using a single <style amp-custom> tag in the head of the document.

Related questions

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @…

Read More
Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some …

Read More
Make an image responsive - the simplest way

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly. However, the ONLY thing that …

Read More