W3.CSS - Environment Setup

Advertisements

Previous Page
Next Page  

How to Use W3.CSS?

There are two ways to use W3.CSS −

  • Local Installation − You can download the W3.CSS file on your local machine and include it in your HTML code.

  • CDN Based Version − You can include the W3.CSS file into your HTML code directly from the Content Delivery Network (CDN).

Local Installation

Example

Now you can include the css file in your HTML file as follows −

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

It will produce the following result −

CDN Based Version

You can include the W3.CSS file into your HTML code directly from the Content Delivery Network (CDN). W3Schools.com provides content for the latest version.

Note − We are using W3Schools.com CDN version of the library throughout this tutorial.

Example

Now let us rewrite the above example using jQuery library from W3Schools.com CDN.

Live Demo 
<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

It will produce the following result −

Advertisements