W3CSS - SPLessons
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

W3CSS Setup

W3.CSS Environment Setup

shape Introduction

This chapter demonstrates about the W3.CSS Environment Setup User can also set the Environment by using two ways which are shown below and these are the concepts are covered in this chapter.
  • Local Installation
  • CDN Based

Local Installation

shape Description

In order to do the local installation, user need to download the W3.CSS file from the W3 Schools web site and place it in users local machine and include it on users HTML code. In order to download the W3.CSS file user need to visit W3 Schools page and user need to download the latest version of the which is available or else click on W3schools to download the W3.CSS file. After downloading adding the file to the local machine user needs to include these file into HTML file which is shown in below example. [html] <html> <head> <title>SPLESSONS Tutorials</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> </head> <body> <header class="w3-container w3-blue"> <h1>SPLESSONS!</h1> </header> </body> </html> [/html] Result By running the above code in a preferred browser user can get the following output as shown in below image.

CDN Based

shape Description

User can also add the W3.CSS file into the HTML code by using the content delivery network W3schools.com have the latest version of W3.css files. The code below demonstrates the adding the W3.CSS file into HTML code by Using CDN Based as shown below. [html] <html> <head> <title>SPLESSONS Tutorials</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-blue"> <h1>SPLESSONS!</h1> </header> </body> </html> [/html]

Summary

shape Key Points

  • W3.CSS file available in w3schools.com
  • User can add W3.CSS directly by using CDN.