Open In App

Pure CSS Introduction

Last Updated : 28 Apr, 2022
Like Article

Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.

Why we use Pure CSS?

  • It is a Faster and Easier way for Web-Development.
  • It creates Platform-independent web-pages.
  • It creates Responsive Web-pages.
  • It designs responsive web pages for mobile devices too.
  • It is Free and open-source framework available on

Pure CSS Components: The Pure CSS has the collection of the following components:


How to use Pure CSS in webpage?

We can add Pure CSS to our webpage in two ways:

  • Using NPM Install
  • Using CDN Link

1. Using NPM Install: You can add Pure CSS to your project through npm. This is our recommended way to integrate Pure CSS into your project’s build process and toolchain.

$ npm install purecss --save

2. Using CDN Link: You can add Pure CSS to your page via the free unpkg CDN link. Just add the following <link> element into your page’s <head>, before your project’s style sheets.

<link rel=”stylesheet” href=”” integrity=”sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd” crossorigin=”anonymous”>

Example: In this example, we are using the pure-table class of Pure CSS to make a table. These tables are just like the normal HTML tables, but with padding and border added to table elements and with an emphasized header. To create a default table add class “pure-table” to the <table> element.


<!DOCTYPE html>
    <!--Import Pure CSS files-->
    <link rel="stylesheet" 
    <!-- Let browser know website is
        optimized for mobile -->
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <h2>Default Table: </h2>
    <!-- Add class "pure-table" -->
    <table class="pure-table">
                <th>Sr no.</th>
                <th>Employee Name</th>


Previous Article
Next Article

Similar Reads

Pure CSS Horizontal Menu
We come across horizontal menus on almost every website. Pure CSS helps us implement such menus with ease by using the pure-menu class. Pure-menu class by default creates a vertical menu which we can simply convert into a horizontal one by adding the class pure-menu-horizontal. One of the most common uses of a horizontal menu is in navigation bars
2 min read
What are the important features of Pure.CSS ?
Pure.css is just another framework of CSS what separates it apart is its tiny size. It's a mere 3.7kb, hence making it a good contender to compete against Bootstrap. Features: First and foremost, It's FREE.It has several important prebuilt common elements as followsBase: Elements like &lt;p&gt;, &lt;h1...h6&gt;, topography etc.Grids: Responsive gri
4 min read
Pure CSS Responsive Grids
Pure CSS is a free and open-source framework of CSS. CSS Grid Layout is a method designed for the two-dimensional layout of items with rows and columns. It consists of both unresponsive and responsive modules. Responsive design's function is to display the contents of the website automatically across all screen resolutions and sizes, and prevents u
4 min read
Pure CSS Menus Complete Reference
Pure CSS is a popular framework &amp; an open-source tool, developed by Yahoo, for creating responsive websites &amp; web applications by making use of the responsive CSS modules, that help to develop a better user experience with high efficiency. It can be used as an alternative to Bootstrap. The Menus contains the linked pages that help to naviga
1 min read
Design a close button using Pure CSS
The task is to make the close button using Pure CSS. There are two approaches that are discussed below. Approach 1: Create a &lt;div&gt; inside another &lt;div&gt; which has alphabet 'X' in it which helps in displaying the close button. When the "click" event occurs on 'X', then perform the operation. In this example the outer &lt;div&gt; has been
2 min read
How to use buttons with icons using Pure CSS?
Incorporating icon fonts with Pure buttons is a simple task using Pure CSS. Since Pure CSS does not come with its own icon pack, we are using icon fonts from Font Awesome. Before creating buttons with icons first we must include the pure.css file into our HTML file directly from CDN. Then link the Font Awesome CSS files to your page. Example 1: The
2 min read
Design a Vertical and Horizontal menu using Pure CSS
Menu is a very important component in any website. It is a user interface element within a webpage that contains links to other sections of the website. It can be displayed horizontally or vertically before the main content of the webpage or header. For Creating Vertical Menu: Menus are vertical by default in Pure CSS. It is easy to customize becau
2 min read
How to design a dropdown menu using pure CSS ?
The Dropdown Menu is a common UI pattern that we have seen on the web nowadays. It is useful in displaying related information in pieces without overwhelming the user with buttons, texts, and options. Most of the time it is seen inside the navigation bar or headers of websites. With the help of Pure CSS, we can easily create such dropdown menus. Ap
3 min read
Pure CSS Buttons
Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. We can create different types of buttons with the help of Pure CSS. Pure CSS Buttons Classes: Default ButtonsDisabled buttonsPrimary buttonsActive buttonsCustomizing buttons Default Buttons: Add the "pure-b
4 min read
Pure CSS Forms
Forms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms. Pure CSS Forms Classes: Default Form Stacked Form Aligned Form Grouped Inputs Default Form: Add the class "pure-form" to any &lt;form&gt; element to create a default form. This form will be inline in nature. Sy
4 min read
Practice Tags :