Search code examples
htmlcssamp-html

AMP page reference for external css

How can I add external css styles in amp page. This tag I am using to include css file.

<link href="css/cssnew.css" rel="stylesheet" media="screen">

Its giving the following error: The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'css/cssnew.css'. (see https://www.ampproject.org/docs/reference/spec#custom-fonts)

In amp documentation it specifies to use inline styling.

<style amp-custom>
//css code
</style>

But how to include all the required css inside this tag since it has certain limits. Can anybody explain me regarding this with an example as I am completely new to amp pages. Thank you in advance

Solution

  • By using PHP you can do that but css should not exceed 50kb. You have to include this line in the head section

    <?php readfile( getcwd() . "/amp.css"); ?>

    CSS:

    <style amp-custom>
    body {
        background-color: blue;
    }
</style>