Pure CSS using Google AMP

Last Updated : 10 Mar, 2023

Pure CSS refers to the use of Cascading Style Sheets (CSS) to control the appearance and layout of a web page without relying on any scripting language, such as JavaScript. The use of Pure CSS helps keep web pages lightweight and fast-loading. It can also improve accessibility by allowing users to control the presentation of a page through their browser’s stylesheet settings.

What is Google AMP?

Google AMP (Accelerated Mobile Pages) is an open-source framework for creating fast-loading mobile web pages. It was introduced by Google in 2015 with the goal of improving the user experience of the mobile web. AMP pages are built using a subset of HTML, CSS, and JavaScript, and are optimized for speed and performance, resulting in pages that load quickly even on slow network connections.

Why use Google AMP?

Improved Performance: Google AMP is designed to load web pages quickly on mobile devices, which can lead to a better user experience and higher engagement.
Better Mobile SEO: Google has stated that mobile-friendliness is a ranking factor in search results, and AMP pages are given special treatment in Google’s search results, which can improve your website’s visibility and traffic.
Increased Ad Revenue: AMP pages can serve ads in a faster and more efficient way, which can lead to increased ad revenue for publishers.
Consistent User Experience: AMP pages have a consistent look and feel across different websites, which can help users navigate and consume content more easily.
Wide Industry Support: Many major publishers, e-commerce sites, and technology companies have adopted AMP, which can help ensure that your content is widely accessible and shareable across different platforms.

Points to remember while using pure CSS with Google AMP

When using Google AMP with pure CSS, there are a number of guidelines and restrictions to keep in mind to ensure the pages are fast, accessible, and AMP-valid. These include:

Inline CSS: All CSS must be inline and limited to 50KB. This helps keep the pages lightweight and fast-loading.
No JavaScript: The use of JavaScript is strictly limited in AMP, so many dynamic styling effects must be implemented using CSS.
Efficient styling: Styles must be written efficiently to minimize the number of style recalculations during page layout. This helps keep the pages fast and responsive.
Valid AMP HTML: All HTML used in AMP pages must be AMP-valid, which means it must adhere to the AMP HTML specification.
Accessibility: AMP pages must be accessible and usable by users with disabilities and follow accessibility best practices and guidelines.

By following these guidelines, we can create fast-loading, visually appealing pages using pure CSS that meet the requirements of the Google AMP framework and provide a great user experience for mobile users.

NOTE: External CSS is not allowed on AMP pages. Custom CSS if any can be added inside the style tag using the amp-custom attribute. Inline CSS is also allowed. AMP reduces HTTP requests in all possible ways.

Syntax:

<html>

<head>
    <style amp-custom>
        CSS stylings...
    </style>
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
</head>

<body>
    content...
</body>

</html>

Example 1: This example illustrates a simple google amp HTML file with pure CSS. We have applied all the points mentioned in the above syntax section.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Pure CSS with Google AMP Example</title> 
    <link rel="canonical" href="example.html" /> 
    <meta name="viewport" content= 
          "width=device-width,minimum-scale=1,initial-scale=1" /> 
    <style amp-custom> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #d7d7d7; 
        } 
  
        h1 { 
            color: #006d16; 
            text-align: center; 
            margin: 1rem 0; 
        } 
  
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            padding: 1rem; 
        } 
  
        h3 { 
            font-size: 1.2rem; 
            line-height: 1.5; 
            color: #333; 
            margin: 1rem 0; 
        } 
    </style> 
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
     </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Geeksforgeeks</h1> 
        <h3> 
            This is a simple example of using pure 
            CSS with Google AMP to create a 
            fast-loading, visually appealing web page. 
        </h3> 
    </div> 
</body> 
  
</html>

Output:

Pure CSS using Google AMP

Example 2: This is another example of using pure CSS with google amp. Here we animated the h3 text to change color using pure CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Pure CSS with Google AMP Example</title> 
    <link rel="canonical" href="example.html" /> 
    <meta name="viewport" content= 
        "width=device-width,minimum-scale=1,initial-scale=1" /> 
    <style amp-custom> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #d7d7d7; 
        } 
  
        h1 { 
            color: #006d16; 
            text-align: center; 
            margin: 1rem 0; 
        } 
  
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            padding: 1rem; 
        } 
  
        h3 { 
            font-size: 1.2rem; 
            line-height: 1.5; 
            text-align: center; 
        } 
  
        @keyframes color-change { 
            0% { 
                color: rgb(255, 0, 0); 
            } 
  
            33% { 
                color: rgb(0, 255, 0); 
            } 
  
            66% { 
                color: rgb(0, 0, 255); 
            } 
  
            100% { 
                color: rgb(255, 0, 0); 
            } 
        } 
  
        .animated-text { 
            animation: color-change 5s linear infinite; 
        } 
    </style> 
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
      </script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Geeksforgeeks</h1> 
        <h3 class="animated-text"> 
          Knowledge is power! 
        </h3> 
    </div> 
</body> 
  
</html>