Chrome Extension

Add styles and CSS in AMP

To add styles on your AMP page add all your styles and CSS rules inside the style tag and insert them into the head tag.
<style amp-custom>
    body {
        background: #FFFFFF;
        font-family: Arial, sans-serif;
    }
</style>
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

You can add styles to your AMP-powered webpage by directly adding CSS rules to the page. You can not link your style files using the link tag on the AMP page as these are disabled.

Styles and CSS rules that are not allowed

There are some keywords and style linking methods in HTML that you can not use in AMP pages. Below are the details about them.

!important: You can not use !important to apply your CSS on the HTML element as it is not considered correct in AMP. If you add !important on your AMP webpage then it will not be validated.

<link rel=”stylesheet”>: You can not link your stylesheet file using the link tag on your AMP webpage.

A full AMP page with custom styles added example is as below

<!doctype html>
<html amp lang="en">
    <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title>Simple AMP Page</title>
        <link rel="canonical" href="https://your_website_domain.com/page_url/">
        <meta name="viewport" content="width=device-width">
        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
        <style amp-custom>
            body {
                background: #FFFFFF;
                font-family: Arial, sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to our amp page</h1>
    </body>
</html>
Was this helpful?
0 Comments