Materialize CSS Installation

Materialize CSS Installation

Materialize CSS installation can be done by following ways.

  • Local installation
  • Using CDN link

Local Installation

Follow the followings step to install Materialize CSS locally.

  • Go to the official website of Materialize CSS and download the latest version.
  • Place the downloaded minified version of CSS and js file in the website project directory.

Project Structure


 MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html
	

HTML Setup

Import the downloaded materialize.min.css file inside the head section and materialize.min.js file just before the closing </body> tag. At the end, make sure that all the link is properly linked.

Source Code

Download
<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
    <!--Let the browser know the website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <!--JavaScript at end of the body for optimized loading-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
  </body>
</html>    
Try it yourself

Using CDN Link

Follow the following steps to include CDN link inside the project directory.

  • Step:1 Go to CDN (Content Delivery Network) link provider's website & find out the following CDN links.

    CDN Link

    
    <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        
  • Step:2 Include Materialize CSS CDN link in the head section of the HTML 5 template:

    Materialize CSS CDN Link

    
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    	  
  • Step:3 Include Materialize CSS Javascript CDN link in the Body section, just before the closing </body> tag.

    Materialize Javascript CDN Link

    
    <!-- Compiled and minified Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    	  

Source Code

Download
<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>    

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS