Pure CSS Installation

Pure CSS Installation -In this Pure CSS tutorial, you will learn how to install Pure CSS framework inside the project. There are two easiest methods to install the Pure CSS.

  • Install Locally
  • Using Pure CSS CDN Link

Install Locally

You can move to official website of Pure CSS and then download Pure CSS. After the include the CSS library inside the <head> section of HTML code using <link>, before your project's stylesheets.

Example

Let us include the downloaded Pure CSS library link into HTML code.

General Syntax

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pure CSS - Installation</title>
    <link rel="stylesheet" href="pure-min.css" />
  </head>
  <body></body>
</html>
    
Try it now

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1-3 graybox"><p>First Column</p></div>
  <div class="pure-u-1-3 orangebox"><p>Second Column</p></div>
  <div class="pure-u-1-3 pinkbox"><p>Third Column</p></div>
</div>          
        
Try it now

Source Code: Output

First Column

Second Column

Third Column

Using CDN Link

You can also add Pure CSS library link by free unpkg CDN. Just place the following <link> element inside the <head> section of the HTML source code before the project's stylesheets.


           <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" >
	    

Example: Adding CDN Link In the HTML Code

Let use use the pure-css CDN link inside the HTML source code.

General Syntax

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pure CSS Installation</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" />
  </head>
  <body></body>
</html>
    
Try it now

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1-3 pinkbox"><p>First Column</p></div>
  <div class="pure-u-1-3 graybox"><p>Second Column</p></div>
  <div class="pure-u-1-3 orangebox"><p>Third Column</p></div>
</div>          
        
Try it now

Source Code: Output

First Column

Second Column

Third Column

Add the Viewport Meta Element

Since pure CSS creates a responsive website means adjusting itself according to the device viewport, hence you have to place the meta elements inside the <head> section of the HTML source code. It controls the width and scale of the viewport on mobile


           <meta name="viewport" content="width=device-width, initial-scale=1">
	    

Web Tutorials

Pure CSS Installation
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4