Accelerated mobile pages link to css file

Question

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'.

Jeff Deskins · Accepted Answer · 2016-03-21T20:10:51.477

14

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.

edited Mar 21 '16 at 20:10

answered Mar 21 '16 at 03:56

Jeff Deskins

1,650
1
10
9

please check this link – Varun Sharma Feb 17 '17 at 05:28
http://stackoverflow.com/questions/42199925/external-style-sheet-is-not-working-in-amp-pages – Varun Sharma Feb 22 '17 at 12:56

score 8 · Answer 2 · answered Apr 15 '16 at 22:17

8

i am using php pages so I do the following to add my custom css page, so i can seperate it and also include in all pages so changing only once etc.

<style amp-custom>
  <?php readfile( getcwd() . "/css/main.min.css"); ?>
</style>

answered Apr 15 '16 at 22:17

Simon Davies

3,668
9
41
69

Please check this link http://stackoverflow.com/questions/42199925/external-style-sheet-is-not-working-in-amp-pages – Varun Sharma Feb 17 '17 at 05:27
sorry did not get a ping on this comment, are yu asking still for help?? – Simon Davies Feb 23 '17 at 21:36

score 1 · Answer 3 · answered Mar 29 '16 at 09:19

Any styling to the page and its elements is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the , called <style amp-custom>

here is sample code:

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

score 0 · Answer 4 · edited Feb 14 '19 at 16:53

0

You can use this:

<style amp-custom>
    <?php echo file_get_contents(STYLESHEETPATH.'/style.css'); ?>
</style>

edited Feb 14 '19 at 16:53

Matt

1,518
4
16
30

answered Feb 14 '19 at 16:05

Md. Abdul Kader Roni

1
1

Accelerated mobile pages link to css file

4 Answers4